用cookie实现localstorage功能

最新推荐文章于 2023-06-19 08:21:59 发布

原创最新推荐文章于 2023-06-19 08:21:59 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#function #浏览器 #date #null #class #html5

工作笔记-html学习专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种在浏览器不支持LocalStorage时使用Cookie来替代的方法，并提供了一个JavaScript类来实现类似的功能，包括设置、获取和删除数据。

在项目中需要利用到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;

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