本地儲存(cookie\localStorage\sessionStorage)
阿新 • • 發佈：2018-12-17
- cookie:
- 始終在同源http中攜帶(及時不需要)，即在瀏覽器與伺服器之間來回傳遞，也因此而造成一定的寬頻浪費。
- 有保質期，在有效期前一直有效。
- 儲存資料不超過4K，適用於會話標記，
- 在同源同窗口中都是共享的，
- 一般也是由後臺獲取cookie資訊，前臺主要儲存資料。
前端語法：
儲存：document.cookie = ‘key=value;expires = GMTString;path=/’;
說明：1.value值需要轉碼，encodeURIComponent();
2.保值期需要時GMT格式的時間
讀取：document.cookie
說明：獲取到的是一個字串cookie值。多個值以‘;’隔開(eg:‘key=value;value’);
- localStorage:
- 始終有效，即使瀏覽器關閉了也一直儲存，若不需要了，需要手動刪除用作持久資料。
- 儲存資料可達到5M。
- 在同源同窗口中都是共享的。
語法：
儲存：localStorage.setItem(key,value);
讀取：localStorage.getItem(key);
刪除一條：localStorage.removeItem(key);
刪除所有:localStorage.clear();
說明：
儲存時，儲存的value必須是字串形式的資料
讀取時，得到的結果也是字串
- sessionStorage:
- 儲存資料僅在瀏覽器關閉之前有效，儲存大小了達到5M，在不同的瀏覽器視窗中不共享，即使是同一個頁面。
語法：
儲存：sessionStorage.setItem(key,value);
讀取：sessionStorage.getItem(key);
- Web Storage與Cookie相比存在優勢：
- 儲存空間更大：個各瀏覽器間略有不同，但都要比Cookie大很多；
- 儲存的內容只會儲存到本地，不會傳送到後臺，從而導致一定的寬頻浪費
- cookie的儲存於獲取需要自己處理相關的資訊，因為沒有封裝好的Cookie，需要自己封裝。
而Web Storage有封裝好的，使用的時候直接用就好(不需要處理相關資訊，
eg：時間格式啊，value轉碼啊ect)； - 獨立的儲存空間，每個域(或子域)都有獨立的儲存空間，而各個儲存空間都是相互獨立互不干擾的，所以不會造成資料混亂。