前端localstorage用法,localstorage的使用
一、什么是localStorage、sessionStorage
在HTML5中，添加了一个新的localStorage特性。该特性主要用作localStorage，解决了cookie存储空间不足的问题(cookie中每个cookie的存储空间为4k)。一般localStorage中的浏览器都支持5M的大小，不同的浏览器会有所不同。
二、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。
如果(！Window.localStorage){ alert(浏览器支持local storage )；返回false}else{ //主逻辑业务}有三种写法}localStorage。下面简单介绍一下。
如果(！Window.localStorage){ alert(浏览器支持local storage )；返回false} else { var storage=window . local storage；//写入a字段存储[ a ]=1；//写入B场storage . a=1；//写C字段storage.setItem(c ，3)；console.log(存储类型[ a ])；console.log(存储类型[ b ])；console.log(存储类型[ c ])；}运行后的结果如下：
这里需要特别说明的是，localStorage的使用也是遵循同源策略的，所以不同的网站不能直接共享同一个localStorage。
控制台上打印的最终结果是：
不知道读者有没有注意到，刚刚存储的是int类型，打印出来的是string类型。这和localStorage本身的特性有关。localStorage仅支持字符串类型存储。
localStorage的读取
如果(!window.localStorage){ alert(浏览器支持本地存储’)；} else { var storage=window。本地存储；//写入a字段存储[ a ]=1；//写入b字段存储。a=1；//写入c字段storage.setItem(c ，3)；console.log(存储类型[ a ])；console.log(存储类型[ b ])；console.log(存储类型[ c ])；//第一种方法读取var a=storage.aconsole。日志(a)；//第二种方法读取var b=存储[ b ]；控制台。日志(b)；//第三种方法读取var c=存储。getitem( c )；控制台。日志(c)；}这里面是三种对本地存储的读取，其中官方推荐的是getItem\setItem这两种方法对其进行存取，不要问我这个为什么，因为这个我也不知道
我之前说过本地存储就是相当于一个前端的数据库的东西，数据库主要是增删查改这四个步骤，这里的读取和写入就相当于增、查的这两个步骤
下面我们就来说一说本地存储的删、改这两个步骤
改这个步骤比较好理解，思路跟重新更改全局变量的值一样，这里我们就以一个为例来简单的说明一下
如果(!window.localStorage){ alert(浏览器支持本地存储’)；} else { var storage=window。本地存储；//写入a字段存储[ a ]=1；//写入b字段存储。b=1；//写入c字段storage.setItem(c ，3)；控制台。日志(存储。a)；//console.log(存储类型[ a ])；//console.log(存储类型[ b ])；//console.log(存储类型[ c ])；/*分割线*/存储。a=4；控制台。日志(存储。a)；}这个在控制台上面我们就可以看到已经a键已经被更改为四了
localStorage的删除
1、将本地存储的所有内容清除
var存储=窗口。本地存储；存储。a=1；storage.setItem(c ，3)；console.log(存储);存储。clear()；console.log(存储);2、 将本地存储中的某个键值对删除
var存储=窗口。本地存储；存储。a=1；storage.setItem(c ，3)；console.log(存储);存储。移除项目( a )；控制台。日志(存储。a)；控制台查看结果
localStorage的键获取
var存储=窗口。本地存储；存储。a=1；storage.setItem(c ，3)；for(var I=0；istorage . length I){ var key=storage。关键(一)；控制台。日志(关键)；}使用钥匙()方法，向其中出入索引即可获取对应的键
四、localStorage其他注意事项
一般我们会将数据存入本地存储中，但是在本地存储会自动将本地存储转换成为字符串形式
这个时候我们可以使用JSON.stringify()这个方法，来将数据转换成为数据字符串
示例：
如果(!window.localStorage){ alert(浏览器支持本地存储’)；} else { var storage=window。本地存储；var data={ name:xiecanyong ，性别：男人，爱好：“程序”}；var d=JSON.stringify(数据);storage.setItem(data ，d)；控制台。日志(存储。数据)；}读取之后要将数据字符串转换成为数据对象，使用JSON.parse()方法
var存储=窗口。本地存储；var data={ name:xiecanyong ，性别：男人，爱好：“程序”}；var d=JSON.stringify(数据);storage.setItem(data ，d)；//将数据字符串转换成为数据对象输出var JSON=存储。getitem(“数据”)；var JSON obj=JSON。parse(JSON)；console.log(类型为JSON obj)；打印出来是目标对象
另外还有一点要注意的是，其他类型读取出来也要进行转换
以上是边肖介绍的HTML5 localStorage的总结。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。