localStorage sessionStorage 增强版
阅读原文时间:2024年06月03日阅读:1

1. 保留了localStorage sessionStorage的(setItem getItem removeItem clear key)api,使用上几乎差不多
2. 增强了setItem方法,增强版的可以设置值为undefined null array object string number类型的值
3. 增加了(has getAll forEach)api

源码如下

/**
* Created by Sorrow.X on 2018/3/30.
* 本地存储实现, 封装localStorage和sessionStorage
*/

;(function() {
const api = {
setItem(key, val) {
if (tip(arguments, 'setItem', 2)) { return }
this.storage.setItem(key, serialize(val))
return val
},

    getItem(key, defaultVal) {  
        if (tip(arguments, 'getItem', 1)) { return }  
        // 如果没有该key, 则自动设置到缓存中去, 默认值为null  
        if (!this.has(key)) {  
            return this.setItem(key, defaultVal || null)  
        }  
        let ret = deserialize(this.storage.getItem(key))  
        // 如果有该key,但是值为undefined或者null,则使用默认值且设置到缓存去  
        if (defaultVal && (ret === undefined || ret === null)) {  
            ret = this.setItem(key, defaultVal)  
        }  
        return ret  
    },

    removeItem(key) {  
        if (tip(arguments, 'removeItem', 1)) { return }  
        this.storage.removeItem(key)  
    },

    clear() {  
        this.storage.clear()  
    },

    key(index) {  
        if (tip(arguments, 'key', 1)) { return }  
        this.storage.key(index)  
    },

    has(key) {  
        if (tip(arguments, 'has', 1)) { return }  
        // 使用原生getItem方法,如果没有该key会返回字符串"null"  
        return this.storage.getItem(key) !== null  
    },

    getAll() {  
        let map = Object.create(null)  
        this.forEach((key, val) => {  
            map\[key\] = val  
        })  
        return map  
    },

    forEach(callback, ctx) {  
        for (let i = 0; i < this.storage.length; i++) {  
            let key = this.storage.key(i)  
            callback && callback.call(ctx, key, this.getItem(key), i)  
        }  
    }  
}

let local = Object.assign({  
    storage: window.localStorage  
}, api)

let session = Object.assign({  
    storage: window.sessionStorage  
}, api)

function serialize(val) {  
    return JSON.stringify(val)  
}

function deserialize(val) {  
    try {  
        return JSON.parse(val)  
    } catch (e) {  
        return val === "undefined" ? undefined : val  
    }  
}

function tip(args, operation, actualNum) {  
    if (args.length < actualNum) {  
        console.error(  
            \`Failed to execute '${operation}' on 'store': ${actualNum} arguments required, but only ${args.length} present.\`  
        )  
        return true;  
    } else {  
        return false;  
    }  
}

if (  
    typeof module !== 'undefined' &&  
    typeof exports === 'object'  
) {  
    module.exports = { local, session }  
} else {  
    window.local = local  
    window.session = session  
}  

})();

使用姿势(和原生对比):

    // 原生  
    localStorage.setItem('num', 1)  
    localStorage.setItem('str', 'str')  
    localStorage.setItem('arr', \[1, 2, 3\])  
    localStorage.setItem('obj', {a: 1, b: 2, c: 3})  
    localStorage.setItem('undefined', undefined)  
    localStorage.setItem('null', null)

    console.log(localStorage.getItem('test'), Object.prototype.toString.call(localStorage.getItem('test')))  
    console.log(localStorage.getItem('num'), Object.prototype.toString.call(localStorage.getItem('num')))  
    console.log(localStorage.getItem('str'), Object.prototype.toString.call(localStorage.getItem('str')))  
    console.log(localStorage.getItem('arr'), Object.prototype.toString.call(localStorage.getItem('arr')))  
    console.log(localStorage.getItem('obj'), Object.prototype.toString.call(localStorage.getItem('obj')))  
    console.log(localStorage.getItem('undefined'), Object.prototype.toString.call(localStorage.getItem('undefined')))  
    console.log(localStorage.getItem('null'), Object.prototype.toString.call(localStorage.getItem('null')))

    // 增强版  
    local.setItem('\_\_num\_\_', 1)  
    local.setItem('\_\_str\_\_', 'str')  
    local.setItem('\_\_arr\_\_', \[1, 2, 3\])  
    local.setItem('\_\_obj\_\_', {a: 1, b: 2, c: 3})  
    local.setItem('\_\_undefined\_\_', undefined)  
    local.setItem('\_\_null\_\_', null)

    console.log(local.getItem('\_\_test\_\_'), Object.prototype.toString.call(local.getItem('\_\_test\_\_')))  
    console.log(local.getItem('\_\_num\_\_'), Object.prototype.toString.call(local.getItem('\_\_num\_\_')))  
    console.log(local.getItem('\_\_str\_\_'), Object.prototype.toString.call(local.getItem('\_\_str\_\_')))  
    console.log(local.getItem('\_\_arr\_\_'), Object.prototype.toString.call(local.getItem('\_\_arr\_\_')))  
    console.log(local.getItem('\_\_obj\_\_'), Object.prototype.toString.call(local.getItem('\_\_obj\_\_')))  
    console.log(local.getItem('\_\_undefined\_\_'), Object.prototype.toString.call(local.getItem('\_\_undefined\_\_')))  
    console.log(local.getItem('\_\_null\_\_'), Object.prototype.toString.call(local.getItem('\_\_null\_\_')))

上图结果截图:

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器