H5的localStorage运用总结--百分百源码网

H5的localStorage运用总结-

发布时间：08/01 来源：未知浏览：关键词：

这次给大家带来H5的localStorage运用总结，运用localStorage的注意事项是什么，下面就是实战案例，一起来看一下。这次给大家带来H5的localStorage运用总结，运用localStorage的注意事项是什么，下面就是实战案例，一起来看一下。

一、什么是localStorage、sessionStorage

在HTML5中，新参加了一个localStorage特性，这个特性主如果用来作为当地存储来运用的，解决了cookie存储空间不够的题目(cookie中每条cookie的存储空间为4k)，localStorage中个别阅读器支撑的是5M大小，这个在不一样的阅读器中localStorage会有所不一样。

二、localStorage的优势与局限

localStorage的优势

1、localStorage拓展了cookie的4K限定

2、localStorage会可以将首先次要求的数据直接存储到当地，这个相当于一个5M大小的针关于前端页面的数据库，比拟于cookie可以节约带宽，但是这个却是只要在高版本的阅读器中才支撑的

localStorage的局限

1、阅读器的大小不同一，而且在IE8以上的IE版本才支撑localStorage这个属性

2、当前所有的阅读器中都会把localStorage的值类型限制为string类型，这个在对我们日常比拼常见的JSON对象类型需要一些转换

3、localStorage在阅读器的隐私模式下面是不成读取的

4、localStorage本质上是对字符串的读取，要是存储内容多的话会耗损内存空间，会致使页面变卡

5、localStorage不克不及被爬虫抓取到

localStorage与sessionStorage的独一一点区别就是localStorage属于永恒性存储，而sessionStorage属于当会话完毕的时候，sessionStorage中的键值对会被清空

这里我们以localStorage来剖析

三、localStorage的运用

localStorage的阅读器支撑状况：

这里要特殊声明一下，要是是运用IE阅读器的话，那么就要UserData来作为存储，这里主要解说的是localStorage的内容，所以userData不做过多的解释，并且以博主个人的看法，也是没有须要去学习UserData的运用来的，由于当前的IE6/IE7属于裁汰的位置上，并且在如今的许多页面开发都会波及到Html5\CSS3等新兴的技术，所以在运用上面个别我们不会去对其进行兼容

第一在运用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);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }

运转后的效果如下：

这里要特殊注明一下localStorage的运用也是遵循同源战略的，所以不一样的网站直接是不克不及共用雷同的localStorage

最后在控制台上面打印出来的效果是:

不晓得各位读者有没有注意到，刚刚存储进去的是int类型，但是打印出来却是string类型，这个与localStorage自身的特色有关，localStorage只支撑string类型的存储。

localStorage的读取

if(!window.localStorage){
            alert("阅读器支撑localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
            //首先种办法读取
            var a=storage.a;
            console.log(a);
            //第二种办法读取
            var b=storage["b"];
            console.log(b);
            //第三种办法读取
            var c=storage.getItem("c");
            console.log(c);
        }

这里面是三种对localStorage的读取，其中官方举荐的是getItem\setItem这两种办法对其进行存取，不要问我这个为何，由于这个我也不晓得

我以前说过localStorage就是相当于一个前端的数据库的东西，数据库主如果增删查改这四个步骤，这里的读取和写入就相当于增、查的这两个步骤

下面我们就来说一说localStorage的删、改这两个步骤

改这个步骤比拼好了解，思绪跟从新更改全局变量的值同样，这里我们就以一个为例来简略的注明一下

if(!window.localStorage){
            alert("阅读器支撑localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.b=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(storage.a);
            // console.log(typeof storage["a"]);
            // console.log(typeof storage["b"]);
            // console.log(typeof storage["c"]);
            /*分割线*/
            storage.a=4;
            console.log(storage.a);
        }

这个在控制台上面我们就可以看到已经a键已经被更改为4了

localStorage的删除

1、将localStorage的所有内容革除

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();
            console.log(storage);

2、将localStorage中的某个键值对删除

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.removeItem("a");
            console.log(storage.a);

控制台查看效果

localStorage的键猎取

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            for(var i=0;i运用key()办法，向其中出入索引即可猎取对应的键
四、localStorage其他注意事项
 个别我们会将JSON存入localStorage中，但是在localStorage会主动将localStorage转换成为字符串情势
这个时候我们可以运用JSON.stringify()这个办法，来将JSON转换成为JSON字符串
示例：
if(!window.localStorage){
            alert("阅读器支撑localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }
读取之后要将JSON字符串转换成为JSON对象，运用JSON.parse()办法
var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);
打印出来是Object对象
信赖看了本案牍例你已经把握了办法，更多出色请关注 百分百源码网 其它相干文章！
举荐浏览：
H5的存储方式详解
postMessage实现跨域、跨窗口新闻通报
以上就是H5的localStorage运用总结的细致内容，更多请关注 百分百源码网 其它相干文章！

打赏