**localStorage**用于[持久化的本地存储](http://www.chengbenchao.top/javascript/855059)，除非主动删除数据，否则数据是永远不会过期的
**sessionStorage**不是一种持久化的本地存储，仅仅是[会话级别的存储](http://www.chengbenchao.top/javascript/855059),页面关闭就清空;
使用
> localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem,clear;
### 存储变量的方法：
~~~
/* 设置 */
sessionStorage.setItem("key", "session");
sessionStorage.setItem("a","hello")
localStorage.setItem("site", "local");
/* 获取 */
var key = sessionStorage.getItem("key");
var site = localStorage.getItem("site");
/* 移除 */
sessionStorage.removeItem("key");
localStorage.removeItem("site");
/* 清空 */
sessionStorage.clear();
localStorage.clear();
~~~
~~~
//遍历sessionStorage
sessionStorage.setItem("key", "session");
sessionStorage.setItem("a","hello")
console.log(sessionStorage);
for(var key in sessionStorage){
console.log(sessionStorage.getItem(key));
}
~~~
~~~
Cookie
Chrome不支持cookie的本地调试
https://github.com/js-cookie/js-cookie
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
//创建cookies 一直有效
Cookies.set('name', 'value');
//设置有效期
Cookies.set('name', 'value', { expires: 7 });
//读取Cookies
Cookies.get('name')
删除Cookies
Cookies.remove("name")
~~~
### 存储对象的方法：
~~~
使用localstorage.setItem()存储对象
使用localstorage.setItem(name,value)存储JSON对象时会发现浏览器存储的内容为[object,object]，并不是我们想要的内容，这是因为我们在存储的时候没有进行类型转换，因此我们在使用localstorage.setItem()进行对象存储之前需要使用JSON.stringify(object)进行类型转换，转换成JSON字符串后进行存储就会是我们想要的样子了{‘xxx’:‘11111’}
~~~
### vue中缓存的运用
~~~
<keep-alive exclude="details,City">
<router-view></router-view>
</keep-alive>
~~~
