Storage.js:

注意:此版本实现的存储在符合Web存储标准(ie8及ie8以上的版本与其他主流浏览器)的情况下与session的周期一致,但在页面不关闭的情况下没有过期时间,ie7及以下版本则默认是永久保存,但可以通过预留的方法setMaxAge(Number age)来设置有效期,设置0的话在关闭或刷新页面时会清除缓存。

(function initStorageClass(win){
var inherit=function(o){
if(o===null || o ===undefined) throw TypeError();
if(Object.create) return Object.create(o);
var t = typeof o;
if(t!=='object'&&t!=='function') throw TypeError();
function f(){}
f.prototype=o;
return new f();
};
var extend=function(a,b){
for ( var key in b) { a[key]=b[key]; }
return a;
};
var defineSubclass=function(superclass,constructor,methods,statics){
constructor.prototype=inherit(superclass.prototype);
constructor.prototype.constructor=constructor;
if(methods) extend(constructor.prototype,methods);
if(statics) extend(constructor,statics);
return constructor;
};
Function.prototype.extend=function(constructor,methods,statics){
return defineSubclass(this,constructor,methods,statics);
};
// 创建一个抽象类
var AbstractStorage=function AbstractStorage(){
throw new Error('Can\'t create abstract class instance');
};
// 添加抽象类的实例方法(已实现)
extend(AbstractStorage.prototype,{
setItem:function(k,v){
k=encodeURIComponent(k);
v=encodeURIComponent(v);
this.storage.setItem(k,v);
return this;
},
getItem:function(k){
k=encodeURIComponent(k);
return decodeURIComponent(this.storage.getItem(k));
},
removeItem:function(k){
k=encodeURIComponent(k);
this.storage.removeItem(k);
return this;
},
setMaxAge:function(age){ // 为IE的userData版本预留了设置有效期的方法
if(isNaN(age)) throw new TypeError('userData\' max-age must be a number,but '+age+' is not a number');
if(this.model&&this.model==='userData') {
var now=new Date().getTime();
var expires=now+age*1000;
this.storage.expires=new Date(expires).toUTCString();
} else {
throw new Error('sessionStorage did\'t support set max-age。');
}
return this;
}
});
var Storage=null;
if(win.Storage) {// 实现了Web存储标准的浏览器
Storage=AbstractStorage.extend(
function WebStorage(){
// IE中实现了Web存储标准的版本,在本地目录下无法使用sessonStorage
if(!win.sessionStorage) {
throw new Error('local web is can\'t save sessionStorage');
}
this.model='sessionStorage';
// 默认使用sessionStorage,也可以自己传入,model自行修改
this.storage=win.sessionStorage;
}
);
} else if(win.navigator.appVersion&&win.navigator.appVersion.indexOf('MSIE')>=0){
// 不支持web存储标准的IE浏览器(IE11的核心版本已和Netscape统一,IE8以上的支持web存储标准)
Storage=(AbstractStorage.extend(
function IEStorage(maxAge){
this.model='userData';
this.maxAge=maxAge;
this.storage=(function initUserData(t){
var memory = document.createElement('div');
memory.style.display='none';
//附加userData行为
memory.style.behavior='url("#default#userData")';
document.appendChild(memory);
if(t.maxAge) {// 设置userData有效期,默认永久,单位毫秒
var now=new Date().getTime();
var expires=now+t.maxAge*1000;
memory.expires=new Date(expires).toUTCString();
}
memory.load('UserDataStorage'); //载入存储的
extend(memory,{
setItem:function(k,v){
this.setAttribute(k,v);
this.save('UserDataStorage');
return this;
},
getItem:function(k){
return this.getAttribute(k)||null;
},
removeItem:function(k){
this.removeAttribute(k);
this.save('UserDataStorage');
return this;
}
});
return memory;
}(this));
}
));
}
win.IStorage=Storage;
win.memory=new Storage()||null;// 创建一个实例对象,可以在脚本中直接引用
}(window));

index.html(简单测试):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="Storage.js"></script>
<script type="text/javascript">
window.onload=function(){
memory.setItem('test','success');
alert(memory.getItem('test'));
};
</script>
</head>
<body> </body>
</html>

在HTML页面中引用Storage.js文件,可以在宿主环境中直接使用已经生成的实例memory(window.memory)。也可以自己创建一个新实例new IStorage()

memory.setItem('test','success');   // add
alert(memory.getItem('test')); // select
memory.removeItem('test'); // delete

适用实现了Web存储标准的浏览器(Storage)与IE浏览器(userData),userData的生命周期请自行根据项目进行设置。

最新文章

  1. 关于Retinex图像增强算法的一些新学习。
  2. 【原创】我所理解的自动更新-外网web服务器配置
  3. VS联调多个解决方案的项目
  4. 黑马程序员——for循环的使用与理解
  5. [BZOJ3786]星系探索
  6. c sharp学习 问题记录
  7. C++11多元组类别
  8. LINUX系统中动态链接库的创建与使用
  9. Linux Debian 7部署LEMP(Linux+Nginx+MySQL+PHP)网站环境
  10. 初学angular
  11. django环境部署 crm和路飞学城
  12. vue ajax返回html代码不渲染解决
  13. [翻译]理解分析Linux里的101个ELF文件
  14. node.js之十大Web框架
  15. 20165231 2017-2018-2 《Java程序设计》第5周学习总结
  16. Python_面向对象_类1
  17. tfs团队项目删除原来连接的默认账户
  18. 【Hadoop 分布式部署 二:分布式环境预备工作(主机名 IP地址等设置)】
  19. wpf XAML 设计器异常,提示NullReferenceException 未将对象引用设置到对象例
  20. 使用CMake编译跨平台静态库

热门文章

  1. 批处理更新svn
  2. C语言(按键获取与函数)
  3. Scala学习笔记--Akka
  4. ASIHTTPRequest中的DELETE、PUT、GET、POST请求实例-备用
  5. 渐变颜色的进度条WGradientProgress-备用
  6. Android 不通过parent实现样式继承
  7. puppet cert maintain
  8. C++中的重载、覆盖、隐藏
  9. CSS3 动画触发事件
  10. 企业生产环境中linux系统分区的几种方案