面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 ...
随机推荐
- (一)java arcgis开发环境搭建
一,整个开发环境 OS:Win7 Development: eclipse 4.3.2 框架:spring+springMVC+mybatis+jquery Arcgis版本:10.2 desktop ...
- 基于GPU的高分一号影像正射校正的设计与实现
一 RPC正射校正的原理 影像正射校正的方法有很多,主要包含两大类:一类是严格的几何纠正模型,另一类是近似几何纠正模型.当遥感影像的成像模型和有关参数已知时,可以根据严格的成像模型来校正图像,这种方法 ...
- [LeetCode] Rising Temperature 上升温度
Given a Weather table, write a SQL query to find all dates' Ids with higher temperature compared to ...
- c#连接关闭了,事务并没有关闭
用的是mysql引擎是InnoDB,用到了连接池. 连接还没关闭,但是事务开启,并执行了更新id=14的操作,这是把这一行锁住了,可以查询,但不能更新和删除,必需等锁释放,提交换回滚事务时锁被释放.直 ...
- html javascript css3 php3.2.3离线手册
各位新年快乐! 愿大家"愿有前程可奔赴,也有岁月可回头"! 发现个离线手册很全的网站,分享大家,也mark自用. http://www.shouce.ren/ 手册网
- mac 10.11.6 自带apache配置记录
详细记录使用自带apache的一些问题 开启apache服务 作为2016年的新版本os,在系统偏好设置里没有网络共享了,所以可以通过终端,直接开启apache服务器: 开启apache:sudo a ...
- ftp同步代码
一个很naive的代码,用来做ftp的"主->从 下载,从->主 上传".ftp可不像mysql那样还有log可以用,所以完全naive的做法:连到ftp server ...
- Javascript两个感叹号的用法(!!)
var foo; alert(!foo);//undefind情况下或者null,一个感叹号返回的是true; alert(!goo);//undefind情况下,一个感叹号返回的也是true; 但是 ...
- 如何用phantomjs去抓取js渲染后的页面
1.安装phantomjs 网上有很多. 2.执行官网上的示例代码 // Read the Phantom webpage '#intro' element text using jQuery and ...
- 精通css 高级web标准解决方案——可视化格式模型-定位模型
CSS 中有三种定位机制:普通流.浮动.绝对定位.(默认为普通流) 改变文档流:display: inline-block; (支持到ie8及以上) 1-匿名块框: <div> 你好! & ...