用cookie实现localstorage功能

来源:互联网 发布:美林数据java开发岗 编辑:程序博客网 时间:2024/05/22 23:08

在项目中需要利用到html5的localstorage。但在利用这个属性的时候却发现无法达到预定目标。经过不断的检查及排除,最后发现原因所在:

项目中使用的浏览器是支持localstorage的,但是却无法使用,具体原因未知(推测可能需要对浏览器的环境变量进行相关配置才能直接使用,但我对此无能为力)。

最后,通过上网查询,发现可以使用cookie实现localstorage的功能(当然数据保存是有期限的),代码如下:

<script  type="text/javascript">//创建localStorage1var 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;

参考资料:http://blog.sina.com.cn/s/blog_62d9b0bf0100u3pi.html

原创粉丝点击