H5新增存储方案

什么是 SessionStorage 和 LocalStorage

和 Cookie 一样，SessionStorage 和 LocalStorage 也是用于存储网页中的数据的

Cookie、SessionStorage、LocalStorage 的区别

生命周期(同一浏览器下)

• Cookie生命周期：默认是关闭浏览器后失效, 但是也可以设置过期时间
• SessionStorage生命周期：仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间
• LocalStorage生命周期：除非被清除，否则永久保存

容量

• Cookie容量：有大小(4KB左右)和个数(20~50)限制
• SessionStorage容量：有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/
• LocalStorage容量：有大小限制(5M左右) http://dev-test.nemikor.com/web-storage/support-test/

网络请求

• Cookie网络请求：每次都会携带在 HTTP 头中，如果使用 cookie 保存过多数据会带来性能问题
• SessionStorage网络请求：仅在浏览器中保存，不参与和服务器的通信
• LocalStorage网络请求：仅在浏览器中保存，不参与和服务器的通信

Cookie、SessionStorage、LocalStorage 的应用场景

• Cookie：判断用户是否登录
• LocalStorage：购物车
• sessionStorage：表单数据

注意点：无论通过以上那种方式存储的数据, 切记不能将 敏感 数据直接存储到本地