浏览器存储（localStorage和sessionStorage）

浏览器存储（localStorage和sessionStorage）

查看存储数据

0.如何用开发者工具查看浏览器存储的数据？
在开发者工具的导航栏中点击加号，选择应用程序

然后会看到
这里有本地存储和会话存储，分别对应着localStorage和sessionStorage。

1.存储内容大小
存储内容大小一般支持5MB左右（不同浏览器会不一样），所存内容以字符串形式存储，所以5MB大小是完全够用的

2.存储所用属性
浏览器通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制

3.相关API
xxx为local或者session
（1）xxxStorage.setItem(‘key’,‘value’)
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新对应的值
参数必须是两个字符串，都会被进行tostring处理，如果需要传对象的数据类型时可用

                        ('key',JSON.stringify(对象))

又需要使用该对象时可用JSON.parse()再将字符串解析为对象，进行数据操作
（2）xxxStorage.getItem(‘key’)
该方法接受一个键作为参数，返回键名对应的值

（3）xxxStorage.removeItem(‘key’)
该方法接受一个键作为参数，删除该键名

（4）xxxStorage.clear()
该方法不需要接收参数，清空存储中所有数据

4.两种方式的不同
1）SessionStorage存储的内容会随着浏览器窗口的关闭而消失（关闭网页即会话结束）
2）LocalStorage存储的内容在关闭浏览器后再次点开网页时依然存在，需要手动清除才会消失（手动清除的方法有两种1.调用API清除 2.直接在开发者工具中清除浏览器缓存）
例如在玩单机游戏时，今天玩了过后关闭网页，第二天打开还可以继续玩

5.需注意的点
1）xxxStorage.getItem(‘key’)如果对应的值不存在、获取不到，返回值是null
2）JSON.parse(null)的结果依然是null