面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));
        }
    }
}
面localStorage用作数据缓存的简易封装的更多相关文章
- 页面localStorage用作数据缓存的简易封装
		最近做了一些前端控件的封装,需要用到数据本地存储,开始采用cookie,发现很容易就超过了cookie的容量限制,于是改用localStorage,但localStorage过于简单,没有任何管理和限 ... 
- sectionStorage与localStorage更新缓存,以及更新layui的数据缓存
		var aa = sessionStorage.getItem('datInfo');//获取缓存数据 name = aa.user; var names = '张三'; sessionStorage ... 
- jQuery数据缓存方案详解:$.data()的使用
		我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能.jQuery提供了自己的数据缓存方案,能够达到和隐藏控件.全局变量相同的效果,但是j ... 
- jQuery 2.0.3 源码分析 数据缓存
		历史背景: jQuery从1.2.3版本引入数据缓存系统,主要的原因就是早期的事件系统 Dean Edwards 的 ddEvent.js代码 带来的问题: 没有一个系统的缓存机制,它把事件的回调都放 ... 
- Memcache,Redis,MongoDB(数据缓存系统)方案对比与分析
		mongodb和memcached不是一个范畴内的东西.mongodb是文档型的非关系型数据库,其优势在于查询功能比较强大,能存储海量数据.mongodb和memcached不存在谁替换谁的问题. 和 ... 
- 微信小程序-数据缓存
		每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearSt ... 
- 【菜鸟学习jquery源码】数据缓存与data()
		前言 最近比较烦,深圳的工作还没着落,论文不想弄,烦.....今天看了下jquery的数据缓存的代码,参考着Aaron的源码分析,自己有点理解了,和大家分享下.以后也打算把自己的jquery的学习心得 ... 
- jQuery源码解读 - 数据缓存系统:jQuery.data
		jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据 ... 
- jQuery1.9.1源码分析--数据缓存Data模块
		jQuery1.9.1源码分析--数据缓存Data模块 阅读目录 jQuery API中Data的基本使用方法介绍 jQuery.acceptData(elem)源码分析 jQuery.data(el ... 
随机推荐
- [LeetCode] Pow(x, n) 求x的n次方
			Implement pow(x, n). 这道题让我们求x的n次方,如果我们只是简单的用个for循环让x乘以自己n次的话,未免也把LeetCode上的想的太简单了,一句话形容图样图森破啊.OJ因超时无 ... 
- [LeetCode] Letter Combinations of a Phone Number 电话号码的字母组合
			Given a digit string, return all possible letter combinations that the number could represent. A map ... 
- logback 常用配置详解<appender>
			logback 常用配置详解 <appender> <appender>: <appender>是<configuration>的子节点,是负责写日志的 ... 
- 庆祝下,提交了第一个ceph pull request。实现了从0到1的突破
			庆祝一下!经过社区老司机的带路,昨天提交了第一个ceph pull request.实现了从0到1的突破,希望再接再厉提交更多代码到社区,为社区发展贡献一点自己力量. 提交的第一个被社区fix的bug ... 
- 【转】JAVA自学之路
			JAVA自学之路 一: 学会选择 为了就业,不少同学参加各种各样的培训. 决心做软件的,大多数人选的是java,或是.net,也有一些选择了手机.嵌入式.游戏.3G.测试等. 那么究竟应该选择什么方向 ... 
- [信安presentation]Fight against GFW
			Section1:加密 加密算法分为:对称加密算法.非对称加密算法.Hash 1.1对称加密算法 加密解密使用相同的密钥 eg:DES,AES,RC4,RC5,Triple DES 缺点:1.因为加密 ... 
- django 关于html、css、js 目录位置
			项目目录: project/ ---------------init.py ---------------views.py ---------------settings.py ----------- ... 
- asp.net mvc bootstrap datatable 服务端分页
			datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 先上图[ jqueryui风格] 前端代码: @{ Layout = null;} <!DO ... 
- CSS3 Animation 帧动画 steps()
			@keyframes fn{ 0%{} 100%{} } CSS3的Animation有八个属性 animation-name :动画名 fn animation-duration:时间 1s ani ... 
- 个人作业——week3
			1.软件工程师的成长 拜读了多位优秀前辈的文章后,感觉十分复杂,虽然说不上是醍醐灌顶的那种大彻大悟,但是确实的感觉到自己内心中某个部分被真切的感触到了.推荐的文章语言都比较平易近人,感觉就像是和多年未 ... 
