web storage本地存储

一、引入
打开京东，开了多个商品页面，每个都点击 加入购物车 ，然后进入购物车页面，可以看到多个商品都在购物车。购物车的数据哪来的？
访问网站，浏览器会给这个网站开辟一块独立的空间，用于存储一些临时的数据（后台的cookie和session）。
例如，打开京东，浏览器会给它准备一个单独空间区域（即cookie和session），可以给京东这个域名下的所有页面去访问、读取、写内容。多个商品页面加入购物车，这些信息会存储到cookie中（公共区域中）；进入购物车，就是从公共区域把数据读出来，即不需要从商品页面传递数据到购物车页面。
html5，使用 JavaScript来存储和访问数据 ，也实现了本地存储的功能（客户端存储），可以不用后台的cookie了（之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高），即 web storage。
二、web storage特点

• 容量大，5m-10m
• 不会随着会话来传输
• 接口方便，读取和写入方便
• 必须是 http 协议的，域名环境
• 对于不同的网站（域名），数据存储于不同的区域，并且一个网站只能访问其自身的数据

三、web storage分类
与session和cookie类似，分为两类（两类的差别跟session和cookie一样）：
1、sessionStorage。关闭浏览器后过期，只要浏览器窗口或标签不关闭就一直保存；只允许在一个标签中操作，也不支持 ctrl+click 操作；适合用在短时间使用的业务中

• sessionStorage.setItem(key,value)，写入本地存储，将value存储到key字段中
• sessionStorage.getItem(key)，获取指定key的本地存储值
• sessionStorage.removeItem(key)，删除指定key的本地存储值
• sessionStorage.length，sessionStorage的项目数
• sessionStorage.clear()，清除所有sessionStorage数据

2、localStorage，不会过期、永久存储，只要不手动清除浏览器缓存，和cookie不一样没有过期时间；多标签共享数据

• 方法同上，以localStorage.开头调用方法