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

原文地址

超少的代码，超级好用哟