localstorage二次封装-模块模式

var db = function () {
    // 本地存储前缀,减少命名冲突
    var prefix = 'ydb';
    return {
        setPrefix: function (_prefix) {
            prefix = _prefix;
            // 本地存储前缀只允许修改一次,如果多次修改,由于单例,可能会导致只能写入,不能读取
            this.setPrefix = null;
        },
        getPrefix: function () {
            return prefix;
        },
        set: function (key, value, expriess = 0) {
            var o = {
                value,
                createTime: Date.now(),
                expriess
            };
            localStorage.setItem(prefix + '-' + key, JSON.stringify(o));
        },
        get: function (key) {
            var storage = JSON.parse(localStorage.getItem(prefix + '-' + key));
            if (!!storage === false) {
                return null;
            }
            else {
                if (storage.expriess <= 0) {
                    return storage.value;
                }
                else {
                    if (storage.expriess + storage.createTime > Date.now()) {
                        return storage.value;
                    }
                    // 过期销毁
                    this.remove(key);
                    return null;
                }
            }
        },
        remove(key) {
            localStorage.removeItem(prefix + '-' + key);
        },
        clear() {
            for (var key in localStorage) {
                if (key.includes(prefix)) {
                    this.remove(key.split('-')[1]);
                }
            }
        }
    }
}()

这里使用来模块模式隐藏存储前缀,避免开发人员意外修改前缀导致无法读取存储的值。

定义了get,set,remove,clear四个特权方法,通过它们来操作prefix,隐藏了对prefix的操作细节,这里使用了js中的一个小技巧,用函数表达式来模拟块级作用域,由于这四个函数构成了闭包,外部函数的活动对象,当中包括prefix,添加到了这四个函数的作用链中,所以可以一直使用这个活动对象,即使外部函数执行完成,这个变量prefix也不会被回收。

别看这个例子很简单,但是里面涉及到的知识点和编程思想还是很多的,望多多思考。

posted @ 2020-01-31 13:57  只会一点前端  阅读(509)  评论(0编辑  收藏  举报