LocalStorage 存储和读取

        在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同(并且在IE8以上的IE版本才支持localStorage这个属性)。所以我们每次使用localStorage的时候可以先去判断一下浏览器是否支持localStorage属性。

                                        
        if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            //主逻辑业务
        }
                                

localStorage的写入，localStorage的写入有三种方法，这里就一一介绍一下

                                        
        if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
        }
                                

        一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式,这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串。

例如：

将数据存储到localStorage中

                                        
//将查询的数据保存至LocalStorage
function SaveLocalStorage(json) {
    var curTime = new Date(new Date().getTime() + 7200000);//由于LocalStorage不会过期， 这里可以设置一个过期时间
    localStorage.setItem("Element", JSON.stringify({ data: json, time: curTime }));
}
                                

获取localStorage中的数据

                                        
//获取localStorage中的数据
function GetLocalStorage() {
    var element = window.localStorage.getItem('Element');
    var json = JSON.parse(element); //将LocalStorage 中的数据转换为json
    var data = eval(json);
    //如果设置了过期时间， 这里可以判断一下数据有没有过期
    if (new Date().getTime() - json.time > 0) {
        alert("LocalStorage中的数据过期了");
    }
    else {
        alert("LocalStorage中的数据没有过期");
    }
}
                                

Tags： JavaScript/Jquery 、 Html

转载：感谢您对白码驿站个人博客网站平台的认可，以及对我们原创作品和文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源白码驿站”。https://www.51baidu.com.cn/Home/Detail/6537

很赞哦！ (0)