storageX，js本地储存对象化，操作简单，结合vue,vuex可以很好的数据持久化。

storageX（版本1.0）本地储存对象化。

什么是sessionStorage

sessionStorage 属性允许在浏览器中存储 key/value 对的数据。读写需要这样

// 存储
sessionStorage.setItem("key", "value");
//读取
let value = sessionStorage.getItem("key");
 

麻烦的就是当我们要储存一个对象时需要将它转化为json字符串（最简单常用的转化）。localStorage也是根据键值存储的，具体差异可以百度。

使用storageX

storageX可以将sessionStorage或localStorage对象化，只用操作对象的属性就可以像本地储存对象数据了，代码只有100多行，超级简单好用，也可以结合vuex一起使用。

只有两种函数方法，这里只介绍sessionStorageX方法的使用（localStorageX是一样的）

不加参数直接使用

//生成一个sessionStorage对象，属性代表着键，键对应值
let object = sessionStorageX();
// 存储
object.key  = value;
//读取
let value = object.key;

//对象也可以
object.key  = {a:1,b:2,c={d:1}};
object.key.a  //1
object.key.c.d  //1
object.key.c.d = 2  //本地相应更新
 

使用参数

//只有两个参数 本地储存对应的键 所初始化的对象
const state = sessionStorageX(
    "userContainer",
    {
        token:"",
        id:'',
        name:'',
    }
);

//修改值
state.token = "哈哈哈哈哈"
//访问
state.token  //哈哈哈哈哈

//和vuex结合很方便
//注意state只是对键 “userContainer” 所对应的对象值进行修改，对state本身的赋值并不影响数据（如果相对键数据进行修改的话请使用sessionStorageX()）
state = null;  //这样对数据不影响，只是对state变量的赋值
 

对键的清空

//清空一个键
const object= sessionStorageX();
object.removeItem(key);  //removeItem作为保留键名，不允许修改添加
 

贴上源码

/*
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,
};

原文地址

超少的代码，超级好用哟