js緩存

localstorage

定義和使用

1. localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據。
2. localStorage 用於長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去刪除。
3. localStorage 屬性是隻讀的。

語法

1. 保存數據 localStorage.setItem("key", "value");
2. 讀取數據 var lastname = localStorage.getItem("key");
3. 刪除數據 localStorage.removeItem("key");
4. 將localStorage的所有內容清除 localStorage.clear();

localStorage 的優勢

1. localStorage 拓展了 cookie 的 4K 限制。
2. localStorage 會可以將第一次請求的數據直接存儲到本地，這個相當於一個 5M 大小的針對於前端頁面的數據庫，相比於 cookie 可以節約帶寬，但是這個卻是隻有在高版本的瀏覽器中才支持的。

localStorage 的侷限

1. 瀏覽器的大小不統一，並且在 IE8 以上的 IE 版本才支持 localStorage 這個屬性。
2. 目前所有的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換。
3. localStorage在瀏覽器的隱私模式下面是不可讀取的。
4. localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡。
5. localStorage不能被爬蟲抓取到。

一般我們會將 JSON 存入 localStorage 中，但是在 localStorage 會自動將 localStorage 轉換成爲字符串形式。這個時候我們可以使用 JSON.stringify() 這個方法，來將 JSON 轉換成爲 JSON 字符串。讀取之後要將 JSON 字符串轉換成爲 JSON 對象，使用 JSON.parse() 方法

cookie

// 創建 cookie
document.cookie = "username=Bill Gates";
// 添加有效日期（UTC 時間）。默認情況下，在瀏覽器關閉時會刪除 cookie
document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";
// 通過 path 參數，您可以告訴瀏覽器 cookie 屬於什麼路徑。默認情況下，cookie 屬於當前頁。
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
// 讀取 cookie：
var x = document.cookie;
/*
刪除 cookie
刪除 cookie 時不必指定 cookie 值
直接把 expires 參數設置爲過去的日期即可
*/
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

document.cookie 會在一條字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

sessionStorage

1. sessionStorage 用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁之後將會刪除這些數據。

語法

1. 保存數據語法:sessionStorage.setItem("key", "value");
2. 讀取數據語法：var lastname = sessionStorage.getItem("key");
3. 刪除指定鍵的數據語法：sessionStorage.removeItem("key");
4. 刪除所有數據：sessionStorage.clear();