页面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用作数据缓存的简易封装
面localStorage用作数据缓存的简易封装 最近做了一些前端控件的封装,需要用到数据本地存储,开始采用cookie,发现很容易就超过了cookie的容量限制,于是改用localStorage,但 ...
- Kotlin安卓页面本地存储数据(方法和封装)
直接上代码 封装: //存储key对应的数据 fun saveData(context: Activity, key: String, info: String) { val sharedPrefer ...
- 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据
利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...
- 十一 三种Struts2的数据封装方式,封装页面传递的数据
Struts2的数据封装:Struts2是一个web层框架,框架是软件的半成品.提供了数据封装的基本功能. 注:Struts2底层(核心过滤器里面的默认栈里面的拦截器,具体见struts-defaul ...
- keep-alive 必须 页面有name 要不缓存不住数据
keep-alive 必须 页面有name 要不缓存不住数据
- 思索-js 页面ID识别及数据缓存
思索-页面ID识别及数据缓存 页面 ID 识别的思路 多页应用在移动端是较为常见的一种架构,它可以和APP 内的 webview 配合,达到类似原生的体验,这一点是单页应用无法做到的(比如手势滑动等, ...
- sectionStorage与localStorage更新缓存,以及更新layui的数据缓存
var aa = sessionStorage.getItem('datInfo');//获取缓存数据 name = aa.user; var names = '张三'; sessionStorage ...
- jQuery数据缓存方案详解:$.data()的使用
我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能.jQuery提供了自己的数据缓存方案,能够达到和隐藏控件.全局变量相同的效果,但是j ...
- Memcache,Redis,MongoDB(数据缓存系统)方案对比与分析
mongodb和memcached不是一个范畴内的东西.mongodb是文档型的非关系型数据库,其优势在于查询功能比较强大,能存储海量数据.mongodb和memcached不存在谁替换谁的问题. 和 ...
随机推荐
- SortedMap接口:进行排序操作。
回顾:SortedSet是TreeSet的实现接口,此接口可以排序. SortedMap接口同样可以排序,是TreeMap的实现接口,父类. 定义如下: public class TreeMap< ...
- 原版ubuntu 系统下,emacs24无法输入中文问题解决方案
在重装了原版ubuntu14后,安装了搜狗输入法,但是意外的发现在emacs下无法使用.在网上查找了一些教程后,解决了该问题.解决方案如下: $sudo mv /usr/bin/emacs24 /us ...
- Qt——设计颜色编辑器
Qt中有一些封装好的对话框,比如QMessageBox.QColorDialog等,用途很广,但缺点是样式难以改变,直接拿来用可能与我们自己的系统样式不搭配,显得很难看. 所以我在无聊的时候,就自己写 ...
- [转]Python yield 使用浅析
您可能听说过,带有 yield 的函数在 Python 中被称之为 generator(生成器),何谓 generator ? 我们先抛开 generator,以一个常见的编程题目来展示 yield ...
- IIS部署SSL,.crt .key 的证书,怎么部署到IIS,记录一下,以免忘记。
SSL连接作用不说,百度很多.因为最近想考虑重构一些功能,在登录这块有打算弄成HTTPS的,然后百度了,弄成了,就记录一下,以便以后万一部署的时候忘记掉. 做实验的时候,拿的我个人申请的已经备案的域名 ...
- tomcat远程部署应用
Tomcat安装成功后,在ip地址:8080上就可以看见熟悉的首页,在这个首页中,上方有一个manage app按钮,点击就可以进行应用管理了.这样就不需要使用ftp把war包传上去了. 要想远程部署 ...
- 一个key 在10w k/v 找到对应的. (B-tree), 这10w放进B-tree 会有多少层.
B-tree是二叉平衡查找树,相邻两层节点层数不超过1 所有10w 即 2^16=65536 < 10w < 2^17=131072: 会有17层,最多查询17次.
- 前端ps常用的小技巧
一些很简单的例子,知道的就当看乐子. 1.T 是文字的 可以从矢量图中查看文字的大小 字体 颜色,具体就是T 选择一段文字,点确定,点击属性栏最后一个可以看详细信息.又字体,行高,颜色.如果要选取 ...
- Word密码破解工具字典攻击用来干什么的
AOPR全称Advanced Office Password Recovery作为一款专业的Word密码破解工具,是通过暴力破解的方式帮助用户迅速恢复各种Word文档的密码,其中常常会用到字典攻击,这 ...
- ORACLE 中的 ROW_NUMBER() OVER() 分析函数的用法
ORACLE 中的 ROW_NUMBER() OVER() 分析函数的用法 ROW_NUMBER() OVER(partition by col1 order by col2) 表示根据col1分组, ...