StorageX (version 1.0) Local storage objectification.

What is the sessionStorage

The sessionStorage property allows key/value pair data to be stored in the browser. This is what reading and writing requires

/ / store
sessionStorage.setItem("key"."value");
/ / read
let value = sessionStorage.getItem("key");
Copy the code

The trouble is that when we want to store an object we need to convert it to a JSON string (the simplest and most common conversion). LocalStorage is also stored according to the key value, the specific difference can be baidu.

Using storageX

StorageX can object sessionStorage or localStorage, using only the properties of the object can store the object data as local, the code is only more than 100 lines, super simple and easy to use, can also be used together with VUex.

There are only two types of function methods, and this is the sessionStorageX method (localStorageX is the same).

Use it without parameters

// Generate a sessionStorage object with properties representing keys and values corresponding to keys
let object = sessionStorageX();
/ / store
object.key  = value;
/ / read
let value = object.key;

// Objects also work
object.key  = {a:1.b:2,c={d:1}};
object.key.a  / / 1
object.key.c.d  / / 1
object.key.c.d = 2  // Update accordingly locally
Copy the code

Using parameter

// There are only two parameters that store the object initialized by the corresponding key locally
const state = sessionStorageX(
    "userContainer",
    {
        token:"".id:' '.name:' '});/ / modify the value
state.token = "Ha ha ha ha ha."
/ / access
state.token  // Hahahaha

// It is convenient to combine with vuex
// Note that state only modifies the value of the object corresponding to the key "userContainer". The assignment of state itself does not affect the data (sessionStorageX() is used to modify the key data).
state = null;  // This does not affect the data, just the assignment of the state variable
Copy the code

The clearing of keys

// Clear a key
const object= sessionStorageX();
object.removeItem(key);  //removeItem is reserved and cannot be added
Copy the code

As the source code

/* storageX 1.0 storage does not support function storage does not support object iteration */
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 (typeofkey ! = ="string"| |! key)throw "The key must be a string | | key cannot be empty." ";
    if (typeof value == "function") throw "Value cannot be 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 {
        returnsessionStorage.getItem(key) ! = =null}}function deepProxy(target, setFn) {
    if(! (targetinstanceof 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 + "Keys have been cleared.";
                            setItem(_key, _target[_key], mode)
                        },
                    );
                    _target[_key] = data;
                    return data
                },
                set(_target, _key, value) {
                    if (_key === "removeItem") throw "RemoveItem is a built-in property and cannot be changed.";
                    _target[_key] = value;
                    setItem(_key, value, mode);
                    return true}}},)else {
        if (typeofkey ! = ="string") throw "Key must be a string";
        if(! (targetinstanceof Object)) throw "Target must be an object";
        let oldTarget = getItem(key, mode);
        if(! oldTarget) { setItem(key, target, mode) }else {
            target = oldTarget;
            if(! (targetinstanceof Object)) throw "LocalStorage key has original value and cannot be converted to object";
        }
        return deepProxy(target,
            function () {
                if(! hasKey(key, mode))throw key + "Keys have been cleared.";
                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,
};
Copy the code

The original address

Super easy to use with very little code