最近做了一些前端控件的封装,需要用到数据本地存储,开始采用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用作数据缓存的简易封装的更多相关文章

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

    面localStorage用作数据缓存的简易封装 最近做了一些前端控件的封装,需要用到数据本地存储,开始采用cookie,发现很容易就超过了cookie的容量限制,于是改用localStorage,但 ...

  2. Kotlin安卓页面本地存储数据(方法和封装)

    直接上代码 封装: //存储key对应的数据 fun saveData(context: Activity, key: String, info: String) { val sharedPrefer ...

  3. 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据

    利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...

  4. 十一 三种Struts2的数据封装方式,封装页面传递的数据

    Struts2的数据封装:Struts2是一个web层框架,框架是软件的半成品.提供了数据封装的基本功能. 注:Struts2底层(核心过滤器里面的默认栈里面的拦截器,具体见struts-defaul ...

  5. keep-alive 必须 页面有name 要不缓存不住数据

    keep-alive 必须 页面有name 要不缓存不住数据

  6. 思索-js 页面ID识别及数据缓存

    思索-页面ID识别及数据缓存 页面 ID 识别的思路 多页应用在移动端是较为常见的一种架构,它可以和APP 内的 webview 配合,达到类似原生的体验,这一点是单页应用无法做到的(比如手势滑动等, ...

  7. sectionStorage与localStorage更新缓存,以及更新layui的数据缓存

    var aa = sessionStorage.getItem('datInfo');//获取缓存数据 name = aa.user; var names = '张三'; sessionStorage ...

  8. jQuery数据缓存方案详解:$.data()的使用

    我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能.jQuery提供了自己的数据缓存方案,能够达到和隐藏控件.全局变量相同的效果,但是j ...

  9. Memcache,Redis,MongoDB(数据缓存系统)方案对比与分析

    mongodb和memcached不是一个范畴内的东西.mongodb是文档型的非关系型数据库,其优势在于查询功能比较强大,能存储海量数据.mongodb和memcached不存在谁替换谁的问题. 和 ...

随机推荐

  1. 2.一个EJB的小Demo

    新建一个java普通项目即可 这里用到了Jboss,需要安装Jboss,然后进入jboss-4.2.3.GA\client目录,拷贝所有的jar包到本项目的lib下. 3个接口分别如下所示: publ ...

  2. 【转】【MySql】MySql优化要点

    如今随着互联网的发展,数据的量级也是撑指数的增长,从GB到TB到PB.对数据的各种操作也是愈加的困难,传统的关系性数据库已经无法满足快速查询与插入数据的需求.这个时候NoSQL的出现暂时解决了这一危机 ...

  3. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 远程同步服务器大量基础数据到客户端

    服务器上保存有上万条的基础数据,需要同步到全国各地的成千上万个客户端,而且这些基础数据也经常在有变化调整.这时候需要有一个稳定的数据同步程序,能分批同步基础数据,由于网络流量,网络的稳定性等因素,需要 ...

  4. 解决Scala Play框架在Git Bash运行的异常:Could not find configuration file ../framework/sbt/sbt.boot.properties

    Git Bash+ConEmu可以模拟Linux强大的命令行.不过在结合Scala和Play时,需要注意如下事项: 1. Scala的安装在64位操作系统下,默认会放在“C:\Program File ...

  5. jquery修改css样式,样式带!important

    由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方 ...

  6. 文法分类的python实现

    #-*-coding:utf-8-*- G = raw_input("提示输入文法:"); #G为文法 S = G[2] #识别符号S Vn = raw_input("提 ...

  7. C++与C的指针的不同

    只有一点不同:C++的类别控制更为严格, 不允许通过void*来实现不同数据类型的数据之间的相互赋值, 只能显示的cast. 例如: bird *b; rock *r; void *v; v = b; ...

  8. ES6新特性:使用export和import实现模块化

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工 ...

  9. 线段树 HDU 3308

    t 题目大意:给你n个数,m个操作.操作有两种:1.U x y 将数组第x位变为y   2. Q x y 问数组第x位到第y位连续最长子序列的长度.对于每次询问,输出一个答案 #include< ...

  10. redis-windows执行redis-cli查询

    1.无密码时的访问 redis-cli -h redis > redis > keys *1) "myset"2) "mysortset" redi ...