实现摘要:通过Array和Object实现Map存储,通过localStorage实现本地缓存,通过函数代理注册传入函数(如回调函数等)。代理函数用来将传入函数添加为自身属性或成员方法以便调用,即代理函数就是一种反射方式。另外,Map存储中含有将Object转换为JSON对象和JSON字符串的方法,可以供需而用。以下是具体实现方式:
/**注册函数域*/
if(typeof noneorone == 'undefined'){
//根域
noneorone = {};
//工具域
noneorone.util = {};
//测试域
noneorone.test = {};
}
/**
* map存储
* @date 2012-02-03
* @author sunnysolong
*/
noneorone.util.map = (function(){
/*键集合*/
this.keys = new Array();
/*数据存储对象*/
this.data = new Object();
/**
* 为缓存对象添加键值对
* @param {String} key
* @param {String} value
*/
this.put = function(key,value){
if(null == this.data[key]){
//若指定的键不存在,则向键集合中追加该键
this.keys.push(key);
}
//将对应的值与键关联
this.data[key] = value;
return data;
};
/**
* 返回指定键关联的值
* @param {Object} key
* @return {Object} 与键对应的值
*/
this.get = function(key){
//检索键对应值并返回
return this.data[key];
};
/**
* 返回已存储大小
* @return {Integer} 目前已存储容量
*/
this.size = function(){
//键集合大小就是已存容量
return this.keys.length;
};
/**
* 通过键删除指定的键值对
* @param {String} key
*/
this.remove = function(key){
//删除键
this.keys.remove(key);
//清空对应的存储值
this.data[key] = null;
};
/**
* 删除所有键值对
*/
this.removeAll = function(){
for(var i=0; i<this.size(); i++){
//循环所有元素,调用移除单个元素的方法依次删除
this.remove(this.keys[i])
}
};
/**
* 获取已存储的所有对象集合
* @return {Array}
*/
this.entrySet = function(){
//重建同级容量的数组,用来存储原始存储对象中所有元素
var entries = new Array(this.size());
for(var i=0; i<this.size(); i++){
//迭代集合元素,并以键值对方式存储在定义的实体集合中
entries[i] = {key: this.keys[i], value: this.data[this.keys[i]]}
}
//返回该实体集合
return entries;
};
/**
* 将键值对转为json串
* @return {String} 返回转换后的字符串
*/
this.toString = function(){
var jsonStr = new String('{');
for(var i=0; i<this.size(); i++){
jsonStr += '"'+this.keys[i]+'":"'+this.data[this.keys[i]]+'",';
}
jsonStr.substring(0, jsonStr.lastIndexOf(','));
return jsonStr.concat('}');
},
/**
* 将键值对封装成JSON对象
* @return {Object} 返回JSON对象
*/
this.toJSON = function(){
var obj = new Object({});
for(var i=0; i<this.size(); i++){
obj[this.keys[i]] = this.data[this.keys[i]];
}
return obj;
}
});
/**
* 本地缓存处理
* @author wangmeng
* @date 2012-02-10
*/
noneorone.util.cache = ({
/*元数据存储*/
data: new noneorone.util.map,
/*模型数据存储*/
model: new noneorone.util.map,
/**
* 存储数据
* @param {Integer} cityId
* @param {String} modelId
* @param {String} cacheKey
* @param {String} cacheValue
*/
storeData: function(cityId, modelId, cacheKey, cacheValue){
this.data.put(cacheKey, cacheValue);
this.model.put(modelId, this.data.toJSON());
localStorage.setItem(cityId, JSON.stringify(this.model.toJSON()));
},
/**
* 获取数据
* @param {String} cityId
* @param {String} modelId
* @param {String} cacheKey
* @param {Function} callBack
*/
getData: function(cityId, modelId, cacheKey, callBack){
var value = JSON.parse(localStorage.getItem(cityId))[modelId][cacheKey];
noneorone.util.ReflectProxy.passParam(callBack, value);
},
/**
* 删除数据
*/
removeData: function(){
this.data.removeAll();
this.model.removeAll();
localStorage.remove();
}
});
/**
* 代理map
*/
noneorone.util.proxyMap = ({
/**存放关联值*/
map: new noneorone.util.map(),
/**注册函数*/
reg: function(key, value){
this.map.put(key, value);
return map;
},
/**获取存储函数集*/
getStore: function(){
return this.map;
}
});
/**
* 代理工厂
*/
noneorone.util.proxyFactory = (function(){
var proxyMap = noneorone.util.proxyMap.getStore();
for(var i=0; i<proxyMap.size(); i++){
var key = proxyMap.keys[i], value = proxyMap.data[key];
this[key] = value;
}
});
/**
* 反射代理
* @type Function | Object
*/
noneorone.util.ReflectProxy = ({
/**
* 注册函数(对象)
* @param {String} id: 标识
* @param {Function} fn: 函数(对象)
*/
reg: function(id, fn){
noneorone.util.proxyMap.reg(id, fn);
},
/**
* 参数传递
* @param {String} id: 标识
* @param {String} param: 参数
*/
passParam: function(id, param){
new noneorone.util.proxyFactory()[id](param);
}
});
/**
* 缓存测试
*/
noneorone.test.store = (function(){
//注册函数对象
noneorone.util.ReflectProxy.reg('callback-test', noneorone.test.callBackTest);
//数据存储本地缓存
noneorone.util.cache.storeData(757, 'community', 'peopleWords', 'da jia zai shuo ...');
//获取本地缓存数据
noneorone.util.cache.getData(757, 'community', 'peopleWords', "callback-test");
});
/**
* 回调测试
* @param {Object} value: 返回值
*/
noneorone.test.callBackTest = function(value){
alert('returned_value >>> '+value);
}
分享到:
相关推荐
JS localStorage实现本地缓存的方法,需要的朋友可以参考一下
主要介绍了localstorage实现带过期时间的缓存功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
本篇文章主要介绍了Java中LocalCache本地缓存实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
使用 localStorage 缓存js
通过localStorage实现留言板的功能,点击添加即可新增留言,可对留言进行修改及删除功能。
使用HTML+CSS+Javascript(ES6) / jQuery以及LocalStorage实现简易的学生管理系统,支持学生信息(学号、姓名、专业、班级)的CRUD
HTML5实现的本地缓存localstorage登录效果实例代码.zip
jquery通过cookie和localStorage实现前端数据交互源码
利用localStorage实现对ueditor编辑内容定时保存为草稿可以防止意外情况导致编辑内容消失!
实现方法: 单个商品加入购物车| 商品批量加入购物车| 删除单个商品| 批量删除商品| 清空购物车| 增减购物车某个商品的数量| 修改购物车某个商品的数量| 查询购物车中某个商品的数量| 查询购物车商品列表| ...
该文档在vue中实现localstorage存储,获取等基本操作,用于浏览器端缓存数据。可根据需要实现多久时间自动过期
一个可以将静态资源(js,css)缓存到本地localStorage的小工具
使用LocalStorage实现的可过期的缓存。运用惰性删除和定时删除两种策略来清除过期的缓存。Use the two strategies of lazy deletion and scheduled deletion to implement expireable localStorage cache.
提供get,set,del方法,快捷在本地存储数据,所有浏览器通用(不支持localstorage的,使用cookie保存)
因为cookie在跨域的情况下,浏览器根本不允许互相访问的限制,为了突破这个限制,所以有了以下这个实现方案,使用postmessage和localstorage进行数据跨域共享。 原理比较简单,但是遇到的坑也不少,这里梳理一下,做...
html 5 localStorage本地存储
主要介绍了JS+HTML5本地存储Localstorage实现注册登录及验证功能,结合实例形式分析了基于JS+HTML5本地存储Localstorage实现注册登录及验证相关操作技巧,需要的朋友可以参考下
今天我们使用本地缓存localStorage来实现页面刷新了,验证码倒计时还是和刷新时一样,而不是清零,其次我们可以使用localStorage去实现用户信息缓存,记住密码等等关于缓存的功能,在这里就简单演示一下验证码功能。...