1.0.4 • Published 3 years ago
redux-localstorage-iframe v1.0.4
redux持久化储存，支持iframe扩容
import ReactDOM from 'react-dom';
import React from 'react';
import { applyMiddleware, createStore, compose, Store } from 'redux';
import { saveLocalStorageMiddleware, loadLocalStorage, removeLocalStorage } from 'redux-localstorage-iframe';
import merge from 'merge-options-es5';
// 注册中间件
const enhancer = compose(applyMiddleware(saveLocalStorageMiddleware()));
// 获取初始数据
const initDataResolve = loadLocalStorage();
// 删除数据
// removeLocalStorage();
// 默认数据
const storeInitialData = {};
// 获取仓库
function getStore(): Promise<Store<WholeStore | undefined>> {
return new Promise((resolve) => {
// 因为有可能是使用iframe存储数据，需要先加载iframe，所以使用异步获取初始化的数据
// 如果获取的是本页面储存的数据，相当于只是包裹了一层Promise
initDataResolve
.then(data => {
resolve(createStore(
reducers,
merge({}, storeInitialData, data),
enhancer,
));
})
.catch(() => {
resolve(createStore(
reducers,
storeInitialData,
enhancer,
));
});
});
}
getStore().then((store) => {
// 获取成功后渲染项目
ReactDOM.render(
<Provider store={store}>
<Router />
</Provider>,
document.getElementById('app')
);
});saveLocalStorageMiddleware 参数
loadLocalStorage 参数
removeLocalStorage 参数
| 参数 | 说明 | 默认值 | 类型 | 必选 |
|---|---|---|---|---|
| namespace | 命名空间 | redux-local-storage | string | × |
| iframeSrc | 使用iframe时的地址 | undefined | string | × |
| iframeId | 使用iframe时的节点id | undefined | string | × |
注意事项
exclude与include参数示例
const store = {
a: {a: {a: 1}},
b: {b: {b: 1}},
c: {c: {c: 1}},
};
// 针对store数据，如果只需要保存store.a.a的数据
include: ['a', 'a']
// 或者
exclude: [['b'], ['c']]
// 针对store数据，如果只想排除store.c.c的数据
exclude: ['c', 'c']跨域保存加密示例
import AES from 'crypto-js/aes';
import encUtf8 from 'crypto-js/enc-utf8';
const capacityNamespace = 'ox'; // 扩容的命名空间
const capacityDomain = 'http://xxx'; // 扩容域名
const capacityIframeId = 'ox-redux-cache'; // 扩容iframe id
const encKey = 'secret key 123'; // enc加密key
// 注册中间件
const enhancer = compose(applyMiddleware(
saveLocalStorageMiddleware({
namespace: capacityNamespace,
shake: 1000, // 延迟1000ms保存
iframeId: capacityIframeId,
iframeSrc: capacityDomain,
dataDispose: data => AES.encrypt(data, encKey).toString(),
onSuccess() {
console.log('设置成功');
},
onError(err) {
console.log('设置失败', err);
},
})
));
// 获取初始数据
const initDataResolve = loadLocalStorage({
namespace: capacityNamespace,
iframeId: capacityIframeId,
iframeSrc: capacityDomain,
dataDispose: data => AES.decrypt(data, encKey).toString(encUtf8),
});
// 删除数据
// removeLocalStorage({
// namespace: capacityNamespace,
// iframeSrc: capacityDomain,
// iframeId: capacityIframeId,
// });<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>扩容</title>
</head>
<body>
<script>
window.addEventListener('message', function (event) {
var regName = event.data.regName;
if (event.data.type === 'setItem') {
try {
localStorage.setItem(event.data.namespace, event.data.data);
window.parent.postMessage(
{ type: 'setItemSuccessCallback', regName: regName, data: event.data.data },
event.data.origin
);
} catch (err) {
window.parent.postMessage(
{ type: 'setItemFailCallback', regName: regName, data: err },
event.data.origin
);
}
}
else if (event.data.type === 'getItem') {
try {
const data = localStorage.getItem(event.data.namespace);
window.parent.postMessage(
{ type: 'getItemSuccessCallback', regName: regName, data: data },
event.data.origin
);
} catch (err) {
window.parent.postMessage(
{ type: 'getItemFailCallback', regName: regName, data: err },
event.data.origin
);
}
}
else if (event.data.type === 'removeItem') {
try {
localStorage.removeItem(event.data.namespace);
window.parent.postMessage(
{ type: 'removeItemSuccessCallback', regName: regName },
event.data.origin
);
} catch (err) {
window.parent.postMessage(
{ type: 'removeItemFailCallback', regName: regName, data: err },
event.data.origin
);
}
}
}, false);
</script>
</body>
</html>