kOYaRZjGn

23朵毒蘑菇

最新版 storageX,支持前端两种存储方式,对象化操作。

原文章迁移

storageX

2021-03-25 16:11:59 已有版本 1 个 show:0.54kTYPE: blog

不仅可以直接操作储存,使用数据源式的操作结合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,
};```