在项目中需要利用到html5的localstorage。但在利用这个属性的时候却发现无法达到预定目标。经过不断的检查及排除,最后发现原因所在:
项目中使用的浏览器是支持localstorage的,但是却无法使用,具体原因未知(推测可能需要对浏览器的环境变量进行相关配置才能直接使用,但我对此无能为力)。
最后,通过上网查询,发现可以使用cookie实现localstorage的功能(当然数据保存是有期限的),代码如下:
<script type="text/javascript">
//创建localStorage1
var localStorage1Class = function(){
this.options = {
expires : 60*24*3600,
}
}
localStorage1Class.prototype = {
//初实化。添加过期时间
init:function(){
var date = new Date();
date.setTime(date.getTime() + 60*24*3600);
this.setItem('expires',date.toGMTString());
},
//内部函数参数说明(key) 检查key是否存在
findItem:function(key){
var bool = document.cookie.indexOf(key);
if( bool < 0 ){
return true;
}else{
return false;
}
},
//得到元素值 获取元素值 若不存在则返回 null
getItem:function(key){
var i = this.findItem(key);
if(!i){
var array = document.cookie.split(';')
for(var j=0;j<array.length;j++){
var arraySplit = array[j];
if(arraySplit.indexOf(key) > -1){
var getValue = array[j].split('=');
//将 getValue[0] trim删除两端空格
getValue[0] = getValue[0].replace(/^\s\s*/, '').replace(/\s\s*$/, '')
if(getValue[0]==key){
return getValue[1];
}else{
return 'null';
}
}
}
}
},
//重新设置元素
setItem:function(key,value){
var i = this.findItem(key)
document.cookie=key+'='+value;
},
//清除所有cookie 参数
remove:function(){
var array = document.cookie.split(';')
for(var cl =0 ;cl<array.length;cl++){
var date = new Date();
date.setTime(date.getTime() - 100);
document.cookie =array[cl] +"=a; expires=" + date.toGMTString();
}
}
}
var localStorage1 = new localStorage1Class();
localStorage1.init();
</script>
因为此项目中浏览器支持localStorage,所以只好命名为localStorage1了,如果浏览器不支持localStorage,则可以直接命名为localStorage。
使用方法如下:
清除所有数据:localStorage1.remove();
查询数据:localStorage1.getItem(keyName);
输入数据:localStorage1.setItem("last_name", name);
检查是否存在数据:if (localStorage1 == null) return;