H5新增浏览器存储

1.1 cookie

特点：

• 数据持久型，即数据在浏览器关闭时才删除
• 不需要任何服务器资源，因为cookie是存储在客户端并发送给服务器读取
• 可配置到期，控制cookie的生命周期，使之不会永远有效，偷盗者可能拿到的是过期的cookie

存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie，一般情况下，cookie是产生于服务器端，保存于客户端。但是我们也可以通过js来产生cookie，可以通过js-cookie这个库来操作cookie

//引入cookie
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/latest/js.cookie.min.js"></script>

//创建一个cookie，7天后过期
var cookie = Cookies.set('name','this is a cookie',{expires:7})

//获取cookie
var name = Cookies.get('name')

//移除cookie
Cookies.remove('name')

1.2 sessionStorage

会话存储，特点如下：

• 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话
• 打开多个相同的URL的Tabs页面，会创建各自的sessionStorage
• 关闭对应浏览器的tab，会清除对应的sessionStorage

实例方法：

//创建
sessionStorage.setItem('name','zhangsan')
//获取
sessionStorage.getItem('name')
//移除
sessionStorage.remove('name')
//清空
sessionStorage.clear()

1.3 localStorage

本地存储，特点如下：

实例方法：

//创建
localStorage.setItem('name','zhangsan')
//获取
localStorage.getItem('name')
//移除
localStorage.remove('name')
//清空
localStorage.clear()