您现在的位置是：首页 > 文章详情文章详情

LocalStorage 存储和读取

会飞的猪 2019-02-17 688人已围观

简介白码驿站是一个面向开发者的知识共享社区,专注于为开发者打造一个纯净的技术交流社区(源码下载,免费在线图片压缩,jquery插件,插件下载,JS/CSS在线压缩。)-白码驿站

在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

很赞哦！ (0)

上一篇：史上最污技术解读

下一篇：sql 中对nvarchar(max)存在的误区