不仅可以直接操作储存,使用数据源式的操作结合vue,vuex相当方便呐!
直接贴代码
/*
storageX 1.0 storage对象化储存
不支持function的储存
不支持对象的迭代
*/
function stringToObject(value) {
try {
return JSON.parse(value)
} catch (e) {
if (value === 'undefined') return undefined;
return value
}
}
function clone(target) {
return JSON.parse(JSON.stringify(target))
}
function removeItem(key, mode = 'local') {
if (mode === "local") {
localStorage.removeItem(key)
} else {
sessionStorage.removeItem(key)
}
}
function setItem(key, value, mode = 'local') {
if (typeof key !== "string" || !key) throw "key 必须是字符串 || key 不能为空";
if (typeof value == "function") throw "value 不能是function";
if (mode === "local") {
localStorage.setItem(key, JSON.stringify(value))
} else {
sessionStorage.setItem(key, JSON.stringify(value))
}
}
function getItem(key, mode = 'local') {
if (mode === "local") {
return stringToObject(localStorage.getItem(key))
} else {
return stringToObject(sessionStorage.getItem(key))
}
}
function hasKey(key, mode = 'local') {
if (mode === "local") {
return localStorage.getItem(key) !== null
} else {
return sessionStorage.getItem(key) !== null
}
}
function deepProxy(target, setFn) {
if (!(target instanceof Object)) return target;
for (let index in target) {
if (target[index] instanceof Object) {
target[index] = deepProxy(target[index], setFn)
}
}
return new Proxy(target, {
set(_target, key, value) {
if (value instanceof Object) {
value = clone(value);
value = deepProxy(value, setFn)
}
_target[key] = value;
setFn();
return true
},
},
)
}
function storageX(key, target = {},
mode = "local") {
if (!key) {
return new Proxy({},
{
get(_target, _key) {
if (_key === "removeItem") return removeItem;
let data = deepProxy(getItem(_key, mode),
function () {
if (!hasKey(_key, mode)) throw _key + "键已被清空";
setItem(_key, _target[_key], mode)
},
);
_target[_key] = data;
return data
},
set(_target, _key, value) {
if (_key === "removeItem") throw "removeItem是内置属性,不能更改";
_target[_key] = value;
setItem(_key, value, mode);
return true
},
},
)
} else {
if (typeof key !== "string") throw "key 必须是字符串";
if (!(target instanceof Object)) throw "target 必须是对象";
let oldTarget = getItem(key, mode);
if (!oldTarget) {
setItem(key, target, mode)
} else {
target = oldTarget;
if (!(target instanceof Object)) throw "localStorage key中有原始值且不能转化为对象";
}
return deepProxy(target,
function () {
if (!hasKey(key, mode)) throw key + "键已被清空";
setItem(key, target, mode)
},
)
}
}
function localStorageX(key, target) {
return storageX(key, target, 'local')
}
function sessionStorageX(key, target) {
return storageX(key, target, 'session')
}
export {
localStorageX,
sessionStorageX,
};```