HTML5新增的存储方案

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：判断用户是否登录
• SessionStorage：表单数据
• LocalStorage：购物车

注意点

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