zoukankan      html  css  js  c++  java
  • 面localStorage用作数据缓存的简易封装

    面localStorage用作数据缓存的简易封装

    最近做了一些前端控件的封装,需要用到数据本地存储,开始采用cookie,发现很容易就超过了cookie的容量限制,于是改用localStorage,但localStorage过于简单,没有任何管理和限制,因此封装了下面这个对象。

    我的封装非常直观简单,比网上的一些晦涩的代码明显小巧精简实用。目前只自动回收过期或最后一次访问时间到现在的间隔最大的项,以后有时间,再把访问次数纳入到自动回收的算法中。

    复制代码
    window.MyCache = window.MyCache || {
        size: 18, //默认队列数量最大值
        defaultexpire: 1800, //默认有效期,30分钟(单位:秒)
        getCache: function () {
            var jsonStr = window.localStorage ? window.localStorage.getItem('myCacheQueue') : '';
            return jsonStr ? JSON.parse(jsonStr) : [];
        },
        get: function (key) {
            var queue = this.getCache();
            for (var i = 0; i < queue.length; i++) {
                if (queue[i].key == key && queue[i].lasttime > (new Date()).getTime()) {
                    var re = queue[i];
                    queue.splice(i, 1);
                    re.times += 1; //访问次数加一
                    re.lasttime = (new Date()).getTime() + re.expire * 1000;//自动延长过期时间
                    queue.push(re); //确保项的顺序跟最后访问时间一致
                    window.localStorage.setItem('myCacheQueue', JSON.stringify(queue));
                    return re.value;
                }
            }
            return null;
        },
        set: function (key, value, expire) {//expire:单位为秒的整数,为负表示永不过期,为零表示删除
            if (!key || !value || !window.localStorage) return false;
            var queue = getCache();
            if (queue.length > this.size) { // 队列满的情况下,移除上次访问时间最早的项
                queue.splice(0, 1);
            }
            for (var i = 0; i < queue.length; i++) {
                if (queue[i].key == key) {//如果已经存在,则删除
                    queue.splice(i, 1);
                }
            }
            if (expire != 0) {
                var time = !expire ? this.defaultexpire: expire < 0 ? 9999999999999 : expire;
                queue.push({ "key": key, "value": value, "times": 0, "expire": time, "lasttime": (new Date()).getTime() + time * 1000 });
                window.localStorage.setItem('myCacheQueue', JSON.stringify(queue));
            }
        }
    }
  • 相关阅读:
    认识js函数对象(Function Object)
    JavaScript对象就是一组属性(方法)的集合
    XML DOM
    XMLHttpRequest 对象
    js列表分页
    一个重构的js分页类
    Oracle translate 函数的用法, 以及和replace的区别
    使用定时器实现JavaScript的延期执行或重复执行
    PHP四种基本排序算法
    http常见状态码(转载)
  • 原文地址:https://www.cnblogs.com/520lin/p/6043992.html
Copyright © 2011-2022 走看看