h5--Web存储--cookie\sessionStorage\localStorage

cookie

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

通常情况下，我们通过 js-cookie 这个库来操作 cookie

<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/2.2.1/js.cookie.js"></script>

// 创建一个 cookie ， 7 天后过期

Cookies.set("name","this is a test cookie",{ expires: 7 })

// 获取 cookie

var name = Cookies.get("name")

console.log(name);

// 移除 cookie

Cookies.remove("name");

sessionStorage

会话存储，其特点如下：

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。 

打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage 。

关闭对应浏览器 tab ，会清除对应的 sessionStorage 。

实例方法： setItem 、 getItem 、 clear 、 removeItem

会话存储  sessionStorage
    sessionStorage.setItem('name', 'xiaoming');  // 设置
    sessionStorage.getItem('name')  // 获取
    sessionStorage.removeItem('name') // 删除
    sessionStorage.clear() // 清空存储的值，属性名保留

localStorage

本地存储，关闭当前 tab 甚至于在关闭浏览器时候数据依旧会保存

实例方法： setItem 、 getItem 、 clear 、 removeItem

  本地存储
    localStorage.setItem('name', 'xiaoming');  // 设置
    localStorage.getItem('name')  // 获取
    localStorage.removeItem('name') // 删除
    localStorage.clear() // 清空存储的值，属性名保留