揭祕前端存儲

最近在項目中使用了部分的前端存儲，以前只有一些簡單的瞭解，今天就趁這個機會把前端存儲進行深刻研究一番。

寫在開始

前端存儲的好處：

• 方便網頁的加載，避免了在發送請求收到響應前頁面的空白期。
• 也能夠在非強制性要求實時最新數據時減小向服務端的請求，加快渲染速度。
• 在網絡不佳或無網絡時仍有離線數據能夠查看。

前端存儲的方式：

首先咱們應該先清除大概都有哪些存儲方式，對此咱們只須要打開控制檯，選擇 application 來進行查看。

咱們能夠看到，存儲大概分爲兩大類，一類爲 存儲類 ，另外一類爲 緩存類。

存儲類：

• Web存儲 （Web Storage）：HTML 5 中提出的存儲方式，容量有 5 M。

  • localStorage
  • sessionStorage

• Cookie：瀏覽器廣泛支持的基於 HTTP 協議的存儲方式，但容量只有 4 KB

• 數據庫存儲：

  • IndexDB
  • Web SQL

緩存類:

• Cache Storage: 在 Service Worker 的規範中提出，通常配合 Service Worker 進行離線緩存。
• Application Cache： 在 HTML5.1提出的緩存方式，可用來構建離線應用。

介紹

個子小的長兄 —— Cookie

HTTP Cookie，它最初適用於客戶端存儲會話信息的、這個標準要求服務器對 HTTP 請求設置 Set-Cookie HTTP 頭做爲響應的一部分，其中會包含有會話信息。瀏覽器在 Cookie 中存儲繪畫信息，並在發送請求時將 Cookie 一塊兒發送過去。

Cookie 的構成

咱們先打開 github 以後進入控制檯查看一下

• 名稱
• 值
• 域
• 路徑
• 失效時間 （格林威治時間）
• 大小
• 是否爲 HTTP請求
• 安全性

域 路徑 失效時間 和 安全性 都是服務器給瀏覽器的指示，他們不會隨着請求發送給服務器，發送給服務器的只有名稱與值對。

Cookie 的限制性

• 若是設定了 Cookie 的過時時間，那麼 Cookie 會在到期時自動失效。
• 若是沒有設定過時時間，那麼 Cookie 就是 session 級別的，即瀏覽器關閉時 Cookie 自動消失。

Cookie 的優缺點

優勢：

1. 能夠控制過時時間，不會永久有效，有必定的安全保障。
2. 可進行擴展，可跨域共享。
3. 經過加密與安全傳輸技術 （SSL） ，能夠減小 Cookie 被破解的可能性。
4. 有較高的兼容性。
複製代碼

缺點：

1. 有必定的數量與長度限制，每一個 Cookie 長度不能超過 4 KB ，不然超出部分會被截掉。
2. 請求頭上的數據容易被攔截攻擊。
複製代碼

新生力量 Web Storage

LocalStorage 與 SessionStorage

咱們能夠先看一下它的兼容性，許多瀏覽器已經徹底支持了它：

數據來源： MDN

出現緣由

• 克服 Cookie 的一些限制，同時存儲一些須要嚴格控制在客戶端，不須要發送給服務器的一些數據。
• 提供了除 Cookie 以外的另外一種存儲會話的途徑。
• 提供了一種大容量存儲空間來跨回話存儲數據的途徑。

如何查看

它們都是直接做爲 window對象的屬性存在的，咱們能夠直接經過 window.localStorage 與 window.sessionStorage 來訪問。

同時，咱們觀察到 Web Storage 只能儲存字符串，若是用 Web Storage 存儲對象，會出現 [Object Object], 能夠用 JSON.stringify 與 JSON.parse方法來解決這個問題。

Web Storage 實例方法

• clear：刪除全部值
• getItem(name): 根據傳入的鍵來獲取對應的值。
• key(index): 得到所對應索引的鍵，名稱。
• removeItem(name): 刪除鍵對應的鍵值對
• setItem(name, value): 爲指定的 name 設置一個對應的值。

沒有感情的 sessionStorage

• 同源策略： 不一樣於 Cookie， sessionStorage 訪問限制更高，只有當前設定了 sessionStorage 的域下才能訪問。
• 單標籤頁： 兩個相同域下的標籤頁不能互通。
• 在關閉標籤頁或者新開的標籤頁下都不能訪問以前寫下的 sessionStorage
• 刷新標籤頁依然能夠訪問 sessionStorage

使用的場景：

1. 主要針對會話級的小數據的存儲。
2. 存儲一些在當前頁面刷新仍然須要存儲，可是關閉後不須要留下的信息。
3. 很適合單頁應用的使用，能夠用來存儲登陸態信息等。
複製代碼

不離不棄的 localStorage

• 同源策略：和 sessionStorage 同樣，要訪問同一個 localStorage 頁面必須來自同一個域名，同種協議，同種端口。
• localStorage 設定後，刷新或者從新打開標籤頁，關閉瀏覽器從新打開原來的標籤頁也能夠訪問到。

使用的場景：

1. 持久性的保存客戶端數據，只能經過 JavaScript 刪除或者用戶清除瀏覽器緩存。
2. 若是有一些稍大量的數據，例如編輯器的自動保存等。
3. 多頁面間訪問共同數據。 sessionStorage 只能用於一個標籤頁，而localStorage能夠在多個標籤頁之間共享。
複製代碼

sessionStorage 與 localStorage 的區別

• 生命週期：localStorage 是本地存儲，沒有期限，只能用戶本身操做來刪除。 sessionStroage 是會話存儲，頁面關閉數據就會丟失。
• sessionStorage 有單標籤頁的限制，localStorage則沒有。

Storage 事件

咱們對 Storage 對象進行任何的操做，都會在文檔上觸發 Storage 事件， 這個事件的 event 對象有如下屬性：

• domain：發生變化的存儲空間的域名。
• key：設置或刪除的鍵名
• newValue： 若是是設置值，則是新值。若是是刪除鍵，則爲null。
• oldValue：鍵被更改以前的值。

數據庫級別： IndexDB 與 Web SQL

Web SQL 相似關係型數據庫， 它使用 sql 語句進行相關操做。

indexDB 相似 NoSQL ， 直接使用 js 的方法操做數據。

特色：

• 訪問：indexDB 和 Web SQL 和 Web Storage 同樣，均是隻能在建立數據庫的域名下才能訪問。
• 存儲時間：存儲時間爲永久，除非用戶清除數據，他可用做長期的存儲。
• 大小限制：兩者其實沒有強制限制。只是 indexDB 在數據超過 50 M 以後會從瀏覽器彈出一個框讓你確認。
• 性能： indexDB 查詢速度會相對較慢，而 Web SQL 的性能相對較快。

實際操做

第一步打開數據庫

var request = indexedDB.open(name, version);
複製代碼

第一個參數爲數據庫的名稱，第二個參數爲數據庫的版本號。

第二步添加數據

建立事務，並加上數據讀寫權限。

var transaction = db.transaction(storeName, 'readwrite');
複製代碼

獲取 objectStore 再調用add方法添加數據

var store = transaction.objectStore(storeName);
var request = store.get(key);
request.onsuccess = function (e) {
    data = e.target.result;
    console.log(student.name);  
};
複製代碼

第三步刪除數據

刪除也須要建立事務，調用刪除接口 ，經過key刪除對象。

var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);

store.delete(key);
複製代碼

第四步查找數據

• 按key查找

  開啓事務，獲取到 objectStore ，調用get()方法獲取對象。

  var transaction = db.transaction(storeName, 'readwrite');
  var store = transaction.objectStore(storeName);
  var request = store.get(key);
  request.onsuccess = function (e) {
      data = e.target.result;
      console.log(student.name)
  };
  複製代碼

• 使用索引查找

  咱們在使用索引以前須要先建立索引，它使用 createIndex方法建立索引，方法有三個參數: 索引名稱、索引屬性字段名，索引屬性值是否惟一。

  objectStore.createIndex('name','name', {
      unique: false
  })
  複製代碼

  建立好了索引，咱們就可使用索引進行查詢：

  var transaction = db.transaction(storeName);
  var store = transaction.objectStore(storeName);
  var index = store.index(search_index);
  index.get(value).onsuccess = function (e) {
      data = e.target.result;
      console.log(student.id);
  }
  複製代碼

• 遊標遍歷數據

  var transaction = db.transaction(storeName);
  var store = transaction.objectStore(storeName);
  var request = store.openCursor(); //成功打開遊標
  var dataList = new Array();
  var i = 0;
  request.onsuccess = function (e) {
      var  cursor = e.target.result;
      if (cursor) {
          console.log(cursor.key);
          dataList[i] = cursor.value;
          console.log(dataList[i].name);
          i++;
          cursor.continue();
      }
      data = dataList;
  }
  複製代碼

第五步，更新對象

爲了更新對象，咱們首先要把它取出來，進行修改以後再放回去。

var transaction = db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(key);
request.onsuccess = function (e) {
    var data = e.target.result;
    for (a in newData) {
        data.a = newData.a;
    }
    store.put(data);
}
複製代碼

第六步，關閉與刪除

關閉數據庫須要調用數據庫的 close 方法

db.close();
複製代碼

刪除數據庫使用數據庫對象 deleteDatabase 方法

function deleteDB (name) {
    indexedDB.deleteDatabase(name);
}
複製代碼

IndexDB 特色

• 它的數據保存在對象存儲空間中。
• 建立對象存儲空間，首先先定義一個鍵，以後添加數據。
• 可使用遊標查詢。

indexDB 的兼容性仍是一大問題，Web SQL 雖然過期，但兼容性卻仍然很是好，移動端幾乎都可用。

Cache Storage

Cache Storage 是用來存儲 Response 對象 ，也就是對 HTTP 響應進行緩存。 Cache Storage 是多個 cache 的集合，每一個 cache 能夠存儲多個響應對象。它基於 Promise。這裏不作詳細的贅述。

Application Cache

它是 HTML5 中新引入的應用程序換粗技術，它的出現意味着 web 應用能夠經過緩存，在沒有網絡的環境下運行，構建離線應用。

優勢:

• 離線瀏覽
• 提高頁面的載入速度
• 下降服務器的壓力

通常來講 Application Cache 只用來存儲一些靜態資源，它的使用方式主要須要兩個步驟：

1.服務端維護一個 manifest清單

2.瀏覽器端進行一個設置。

<html manifest="demo">
複製代碼

通常的，咱們必須給 manifest 文件設置正確的 MIME-type 爲 "text/cache-manifest"，它須要在服務器端進行配置。

在 Progressive Web Application 中， Application Cache 配合 Service Worker 承擔着主要的任務。

參考文獻

MDN: LocalStorage , sessionStorage, indexDB

本地存儲與離線存儲

前端存儲之IndexDB