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

sessionStorageX（版本1.0）从名字就能看出，目前只有操作sessionStorage的，其他的照猫画虎就行。

什么是sessionStorage

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

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

麻烦的就是当我们要储存一个对象时需要将它转化为json字符串（最简单常用的转化）。

什么是sessionStorageX

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

只有两种使用方式

不加参数直接使用

//生成一个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作为保留键名，不允许修改添加

贴上源码

function stringToObject(value) {
    try {
        return JSON.parse(value)
    } catch (e) {
        return value
    }
}
function clone(target) {
    return JSON.parse(JSON.stringify(target))
}
function removeItem(key) {
    sessionStorage.removeItem(key)
}
function deepProxy(target, setFn) {
    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 sessionStorageX(key, target = {}) {
    if (!key) {
        return new Proxy({},
            {
                get(_target, _key) {
                    if (_key === "removeItem") {
                        return removeItem
                    }
                    let data = stringToObject(sessionStorage.getItem(_key));
                    _target[_key] = data;
                    if (data instanceof Object) {
                        data = deepProxy(data,
                            function () {
                                sessionStorage.setItem(_key, JSON.stringify(_target[_key]))
                            },
                        )
                    }
                    return data
                },
                set(_target, _key, value) {
                    if (_key === "removeItem") {
                        throw "removeItem是内置属性，不能更改";
                    }
                    _target[_key] = value;
                    sessionStorage.setItem(_key, JSON.stringify(value));
                    return true
                },
            },
        )
    } else {
        if (typeof key !== "string") throw "key 必须是字符串";
        if (!(target instanceof Object)) throw "target 必须是对象";
        let oldTarget = sessionStorage.getItem(key);
        if (!oldTarget) {
            sessionStorage.setItem(key, JSON.stringify(target))
        } else {
            target = stringToObject(oldTarget);
            if (!(target instanceof Object)) throw "sessionStorage key中有原始值且不能转化为对象";
        }
        return deepProxy(target,
            function () {
                sessionStorage.setItem(key, JSON.stringify(target))
            },
        )
    }
}
export
    default sessionStorageX;

阅读原文