浏览器本地存储

webStorage

背景

Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie则存在很多致命伤。

HTML5中给出了一些解决方案，其中一种就是webStoage。

假如你需要存储的只是简单的用key/value对即可解决的数据则可以使用Web Storage。

介绍

WebStorage存储内容大小一般支持5MB左右（不容浏览器可能不一样）。它实际上由两部分组成：sessionStorage与localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。它是会话级别的存储。

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

浏览器通过Window.sessionStorage和Window.localStorage属性来实现本地存储

相关API

xxxStorage.setItem(key, val)
// set storage with key and val,If the key name exists, update value
xxxStorage.getItem(key)
// return value of key
xxxStorage.removeItem(key)
// delete key and val from storage
xxxStorage.clear()

注意

1. xxxStorage.getItem(key)，如果key对应的value获取不到，那么返回值为null
2. JSON.parse(null) 结果为null