**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>
~~~
