本地存储LocalStorage和SessionStorage详解

一、什么是localStorage和sessionStorage？

   localStorage(长期存储)、sessionStorage(会话存储)是H5中的本地web存储提供的两个接口，
相当于前端一个小型的本地数据库，用于在本地存储一些不敏感的数据，隶属于window对象。
1
2

二、localStorage和sessionStorage的异同？

   同:两者的API完全相同，都是在浏览器端存储数据。
   异:
   1.localStorage存储的数据是永久性数据,页面刷新，即使浏览器重启，甚至操作系统重启也不
会丢失，并且存储的数据在同源（协议、域名、端口号一致）下的标签页和window窗口之间共享。
   2.sessionStorage存储的数据有些苛刻，页面刷新仍然有效,选项卡关闭时数据丢失。但是在相同
标签页打开的多个iframe之间数据可以共享(同源的情况下)。

  总结:两者都是在浏览器端存储数据,localStorage存储的数据被限制在同源下,可跨窗口通信,不可跨浏览器,跨域；sessionStorage存储的数据被限制在标签页(页卡关闭丢失)。
  
1
2
3
4
5
6
7
8
9

三、localStorage(以此为例)的优势和局限

 优势:扩展了cookie的4kb存储的限制，浏览器的统一标准在5M,不同的浏览器大小会有区别，可在第一
次请求的数据(或者长期使用的数据)用localStorage存在本地，此时相当于在本地有了一个5M左右的前台数据库,相比cookie每次请求都带着,节约带宽。
 局限: 
    1.各个浏览器的支持的大小不一样，业界认为是5M,并且在不同的浏览器不同版本支持度不一样。
    2.localStorage的存储的数据都是K-V键值对，并且值会被转为String类型，所以有时候会用JSON进行数据转换。
    3.localStorage本质上是字符串的读取,存储的数据不可过多，否则消耗会消耗内存空间，导致页面卡顿
    4.localStorage的数据不能被爬虫抓取.
1
2
3
4
5
6
7

四、各个浏览器对localStorage的支持的情况

ps: 从上图可以看出,localStorage不适应用于IE6/7,应该使用UserData，这里不再讲解。

五、LocalStorage存储数据的增删改查

说明:

验证


Ps:浏览器端提供的 Storage接口，主要用来存储数据，实际上是LocalStorage和SessionStorage2个对象，部署了这个接口，Storage接口存储的数据发生变动，会触发Storage事件,但这个事件特殊，不在当前引起数据变动的窗口触发，而是在同域名下其他窗口触发
换句话说：就是你打开当你打开浏览器多个(同源)窗口，当其中一个窗口导致存储的数据发生改变，其他同源窗口会监测到这个事件。所以可以做多窗口通信

总结：

1.大小：官方建议是5M存储空间
2.类型：只能操作字符串，在存储之前应该使用JSON.stringfy()方法先进行一步安全转换字符串，取值时再用JSON.parse()方法再转换一次
3.存储的内容： 数组，图片，json，样式，脚本。。。（只要是能序列化成字符串的内容都可以存储）
4.注意：数据是明文存储，毫无隐私性可言，绝对不能用于存储重要信息
5.区别：sessionStorage将数据临时存储在session中，浏览器关闭，数据随之消失，localStorage将数据存储在本地，理论上来说数据永远不会消失，除非人为删除另外，不同浏览器无法共享localStorage和sessionStorage中的信息。同一浏览器的相同域名和端口的不同页面间可以共享相同的 localStorage，但是不同页面间无法共享sessionStorage的信息。