前端存貯全家桶--cookie、sessionStorage、localStorage、和indexedDB重點合集

nightZing發表於2018-09-04
前端CookieSessionIndex

寫在前面：前三種方式大家都和很熟悉，因為cookie、sessionStorage、localStorage都屬於js語言的本地存貯，而indexedDB是一種前端儲存資料庫，這篇文章會分別介紹這四種方式，以及他們之間的共同點和不同點。

一.什麼是cookie、sessionStorage、localStorage、和indexedDB

1.cookie
Cookie 是一些資料, 儲存於你電腦上的文字檔案中。

當 web 伺服器向瀏覽器傳送 web 頁面時，在連線關閉後，服務端不會記錄使用者的資訊,而Cookie 的作用就是用於解決 "如何記錄客戶端的使用者資訊":

當使用者訪問 web 頁面時，他的名字可以記錄在 cookie 中。 在使用者下一次訪問該網站時，可以在 cookie 中讀取使用者訪問記錄。比如，下次訪問同一網站時，使用者不必輸入使用者名稱和密碼就已經登入了（排除使用者手工刪除Cookie情況）

cookie的幾個常見的用法見下面封裝的Cookie增刪改查函式

 //新增cookie
function setCookie(key, value, iDay) {
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + iDay);
    document.cookie = key + '=' + value + ';expires=' + oDate;

}
//刪除cookie
function removeCookie(key) {
    setCookie(key, '', -1);//這裡只需要把Cookie保質期退回一天便可以刪除
}
//獲取cookie
function getCookie(key) {
    var cookieArr = document.cookie.split('; ');
    for(var i = 0; i < cookieArr.length; i++) {
        var arr = cookieArr[i].split('=');
        if(arr[0] === key) {
            return arr[1];
        }
    }
    return false;
}
複製程式碼

具體用法可參見Cookie詳解

2.localStorage和sessionStorage
localStorage 和 sessionStorage 屬性允許在瀏覽器中儲存 key/value 對的資料。

sessionStorage 用於臨時儲存同一視窗(或標籤頁)的資料，在關閉視窗或標籤頁之後將會刪除這些資料。 localStorage 用於長久儲存整個網站的資料，儲存的資料沒有過期時間，直到手動去除。 基本用法見下面程式碼：

// 儲存
localStorage.setItem("lastname", "Smith");
// 檢索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

// 儲存
sessionStorage.setItem("lastname", "Smith");
// 檢索
document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");
複製程式碼

具體用法可參見JavaScript 儲存物件

3.indexedDB
indexedDB就是一個非關係型資料庫，它不需要你去寫一些特定的sql語句來對資料庫進行操作，因為它是nosql的，資料形式使用的是json。 具體用法可參見IndexedDB中文文件

二.cookie、sessionStorage、localStorage、和indexedDB各自優劣

1.cookie
優點：

  • 具有生命週期。儲存使用者的登陸狀態，使用者進行登陸，成功登陸後，伺服器生成特定的cookie返回給客戶端，客戶端下次訪問該域名下的任何頁面，將該cookie的資訊傳送給伺服器，伺服器經過檢驗，來判斷使用者是否登陸。可以在客戶端上儲存使用者資料，記錄使用者的行為等
  • 不需要任何伺服器資源。 Cookie 儲存在客戶端並在傳送後由伺服器讀
  • 使用較簡單。Cookie 是一種基於文字的輕量結構，包含簡單的鍵值對。
  • 資料永續性。雖然客戶端計算機上 Cookie 的持續時間取決於客戶端上的 Cookie 過期處理和使用者干預，Cookie 通常是客戶端上持續時間最長的資料保留形式。

缺點：

  • 安全性隱患，cookie使用明文傳輸。如果cookie被人攔截了，那人就可以取得所有的session資訊，可以操縱和篡改其計算機上的 Cookie。另外，雖然 Cookie 只能被將它們傳送到客戶端的域訪問，歷史上黑客已經發現從使用者計算機上的其他域訪問 Cookie 的方法。
  • 大小和長度受到限制。大多數瀏覽器對 Cookie 的大小有 4096 位元組的限制
  • 增加流量消耗，每次http請求都需要帶上cookie資訊，浪費寬頻。
  • 使用受限制。因為Cookie依賴於客戶端，有些使用者禁用了瀏覽器或客戶端裝置接收 Cookie 的能力，因此限制了這一功能。

2.localStorage和sessionStorage

優點：

  • 儲存資料量大
  • 不會隨http請求一起傳送,減少流量消耗
  • 使用靈活，可根據兩者不同特點變換使用localStorage和sessionStorage

缺點：

  • 在瀏覽器的隱身模式下不能讀取(可以採用window.name模擬sessionStorage的方式處理)
  • 本質是在讀寫檔案，寫入資料量大的話會出現卡頓現象（firefox是將localstorage寫入記憶體中的）
  • 不能被爬蟲讀取,所以不利於seo（因為要進行SEO，必須直接輸出完整HTML，因此必須讓樣式在頭部以link標籤載入。如果先輸出HTML，後用js從本地快取讀取樣式再插入，會出現嚴重的阻塞和效能問題）
  • pc端相容性不是很好

3.indexedDB

優點：

  • 存貯數量大且資料永續性長。（前面提到，sessionStorage關閉視窗頁面後就會自動清除掉，而清除瀏覽器快取後localStorage會被刪除，雖然cookie資料永續性好但是有資料量小等多個弊端，indexedDB結合了前面三者優點，取其精華，去其槽粕）
  • 以字串形式存貯適合大量資料。（LocalStorage是用key-value鍵值模式儲存資料，IndexedDB它儲存的資料都是字串形式。如果你想讓LocalStorage儲存物件，你需要藉助JSON.stringify()能將物件變成字串形式，再用JSON.parse()將字串還原成物件。畢竟，localstorage就是專門為小數量資料設計的，所以它的api設計為同步的。而IndexedDB很適合儲存大量資料，它的API是非同步呼叫的。IndexedDB使用索引儲存資料，各種資料庫操作放在事務中執行。IndexedDB甚至還支援簡單的資料型別。對於簡單的資料，你應該繼續使用localstorage，但當你希望儲存大量資料時，IndexedDB會明顯的更適合，IndexedDB能提供你更為複雜的查詢資料的方式）

缺點：

  • 是一種資料庫形式，使用相對複雜，學習成本較高
  • 使用需要構建環境，相比於cookie、sessionStorage、localStorage開發移植性較差

4.總結

結合以上介紹的這幾種前端儲存技術的優缺點，我們可以得出使用參考建議：

  • 移動端儘量使用 localStorage與sessionStroage為主
  • pc端使用根據瀏覽器相容情況以sessionStorage、localStorage為主，cookie為輔
  • 對於簡單的資料，使用sessionStorage和localstorage為主，但當你希望儲存大量資料時，IndexedDB會明顯的更適合，IndexedDB能提供你更為複雜的查詢資料的方式

三.彩蛋

前面基本和主要的點都說的差不多了，最後為大家送上總結出來的cookie、sessionStorage、localStorage這三者的主要的幾個不同點和相同點：

1.不同點

  • 傳遞方式不同
    cookie資料始終在同源的http請求中攜帶(即使不需要)，即cookie在瀏覽器和伺服器間來回傳遞。
    sessionStorage和loaclStorage不會自動把資料發給伺服器，僅在本地儲存。
  • 資料大小不同
    cookie資料還有路徑(path)的概念，可以限制cookie只屬於某個路徑下。 儲存大小限制也不同，cookie資料不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合儲存很小的資料，如會話標識。
    sessionStorage和localStorage雖然也有儲存大小的限制,但比cookie大得多，可以達到5M或者更大。
  • 資料有效期不同
    sessionStorage:僅在當前瀏覽器視窗關閉前有效，自然也就不可能持久保持；
    localStorage:始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料；
    cookie只在設定cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。
  • 作用域不同
    sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；
    localStorage在所有同源視窗中都是共享的；
    cookie也是在所有同源視窗中都是共享的。

2.相同點
都儲存在瀏覽器端，都是同源的

相關文章