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

LocalStorage 存储和读取

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

简介白码驿站是一个面向开发者的知识共享社区,专注于为开发者打造一个纯净的技术交流社区(源码下载,免费在线图片压缩,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)

系统处理中...