4

在前端開發過程中，為了與伺服器更方便的互動或者提升使用者體驗，我們都會在客戶端（使用者）本地儲存一部分資料，比如cookie/localStorage/sessionStorage。在後端管理系統的前端，更是會涉及到一部分超大資料的請求，一個介面有時會達到5M甚至15M的程度，當這個介面資料並不是經常更新時，我們可以用兩種方式，一種是分頁請求+預載入+懶載入，另一種就是本地儲存+熱更新。而由於第二種方式使用者體驗更優秀，便是我常用的方式。

這篇文章的客戶端本地儲存，我們主要講到cookie/localStorage/sessionStorage/indexedDB四種技術。

cookie

HTTP Cookie

// Request Header 

GET /oss/index.php?r=api/jlog/collect HTTP/1.1
Host: gzhxy.baidu.com:8090
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36

···

Cookie: name=Leon; age=24
 

Cookie有一些限制：

• 它是以; （分號+一個空格）分割的鍵值對字串，在網路傳送時必須是URL編碼的。
• 繫結在固定域名下，不允許其它域名訪問。
• 有些瀏覽器有數量限制，在超出後刪除順序不統一，有些最近最少使用（LRU），有些隨機刪
• 同一域名下總大小限制5KB，超出限制後靜默失敗

Cookie的引數構成：

• 名稱：唯一確定，不區分大小寫（實際編寫建議區分），必須URL編碼
• 值：字串值，必須URL編碼
• 域：該cookie欄位有效的域，可以為baidu.com域名，也可以為cdn.baidu.com子域名，預設值為當前頁面子域名
• 路徑：該cookie欄位有效範圍為指定域下的具體路徑，如cdn.baidu.com/oss
  ，那麼其他路徑就無法訪問
• 失效時間：cookie被刪除的時間戳，預設值為瀏覽器會話結束被刪除，也可以手動設定，時間格式為GMT格式Wdy, DD-Mon-YYYY HH:MM:SS GMT，可以呼叫Date例項的toGMTString()方法轉換，如果設定為過去的時間，該cookie被立刻刪除
• 安全標誌：為單詞secure而非鍵值對，指定後，只有在SSL連線的時候才會被髮送到伺服器，也就是https協議

注意引數中只有名稱和值才會被髮送給伺服器，其餘的只是需要瀏覽器識別的命令式引數。

cookie的介面設定非常的不人性化，往往需要我們對其操作進行封裝才會方便使用。下面我們對其進行增刪查改。

檢視cookie：decodeURIComponent(document.cookie);

新增或修改cookie：

// 需要改成自己需要的cookie和域名、路徑以及是否為https
document.cookie = 'encodeURIComponent(name)=encodeURIComponent(Leon); expries=' + (new Date(Date.now() + 24*60*60*1000)).toGMTString() + '; path=oss; domain=cdn.baidu.com; secure';

刪除cookie: document.cookie = 'name=Leon; expires=' + (new Date(0)).toGMTString();

具體的封裝的方式網上有很多，可以去搜一搜，核心就是對cookie進行字串檢索和切分，以及將傳入的函式引數最終轉換為字串。

Storage

由於cookie的大小限制和需要全量傳遞給伺服器，在很多場景下並不適用，所以HTML5規範中出現了Storage物件，包含localStorage和sessionStorage兩種繼承物件，屬於window的屬性。它提供了通常5M的大小空間來儲存無需伺服器互動的本地資料。

Storage的常用方法：

• clear(): 清除所有值
• getItem(name): 獲取指定name的值
• key(index): 獲得對應索引值的鍵名
• removeItem(name): 刪除指定name的鍵值對
• setItem(name, value): 為指定name設定對應的值

除了這些方法之外，Storage物件可以直接通過點語法或者方括號語法訪問屬性和操作屬性，也可以通過delete關鍵字刪除屬性。該物件中的值均為字串。

持久化資料localStorage通常保留到JS刪除或者使用者清除瀏覽器快取。

會話資料sessionStorage保留到關閉瀏覽器。由於繫結會話視窗，所以不支援本地檔案讀寫。另外在IE8中，該物件為非同步讀寫，需要呼叫begin()和commit()方法保證成功讀取，不再贅述。

對Storage物件做任何的新增，修改或者刪除操作，都會觸發storage事件。該事件只支援在與服務端通訊時，一個頁面修改，另一個頁面會觸發該事件。

document.addEventListener('storage', function (e) {
    console.log(e);
});

該事件物件的主要屬性：

• domain: 發生變化的儲存空間的域名
• key：修改的鍵名
• newValue：如果是設定值，則為新值；如果刪除，則為null
• oldValue：更改前的值

IndexedDB

擁有了Storage利器，已經能解決很多問題，但是通常5M的大小限制還是會限制一部分場景，比如後臺管理系統的介面資料很容易突破5M，這個時候就需要我們的瀏覽器資料庫IndexedDB了。其實在此之前，各家廠商主要推廣的是Web SQL Database，不過後來被廢棄了，雖然現在在部分平臺上也能使用，但我們不做介紹了。

IndexedDB資料庫用於瀏覽器儲存結構化資料，區別於傳統資料庫它儲存的是物件，完全採用事務型別，所有的操作被轉換為請求的方式，所以我們需要對每一步操作添加回調函式。

一個完整的例項為：

// 判斷能否正確開啟資料庫，避免多次檢測
let dbOpened = false;
// 開啟本地持久化資料庫，預設版本為1
const request = indexedDB.open('jomocha');
// 當開啟錯誤時
request.onerror = function(event){
    console.error('開啟本地持久化資料錯誤', event);
    OSS.commonUI.showMsg('開啟本地持久化資料庫錯誤，試用功能，不影響使用，請聯絡zhaoshuaiqiang', 'error');
};
// 當資料庫首次建立該版本時（首次建立或更新版本）
request.onupgradeneeded = function(event){
    const db = event.target.result;
    // 建立一個數據庫儲存物件，儲存所有的維度項，分為name和list兩個屬性
    const objectStore = db.createObjectStore('dimensions', {
        keyPath: 'name'
    });
    // 定義儲存物件的資料項屬性
    objectStore.createIndex('name', 'name', {
        unique: true
    });
};
// 成功打開了資料庫
request.onsuccess = function(event){
    dbOpened = true;
    const db = event.target.result;
    // 新建一個事務，包含oncomplete 和onerror控制代碼事件，預設值為readonly，只讀模式，可並行
    const transaction = db.transaction(['dimensions']);
    // 開啟儲存物件
    const objectStore = transaction.objectStore('dimensions');
    const request = objectStore.get('host');
    request.onsuccess = function (event) {
        // 第一次開啟資料庫時，肯定沒有資料，所以需要檢測
        if (event.target.result) {
            JomoCha.data = event.target.result.list;
        }
    };
}

資料庫

當我們需要使用IndexedDB時，首先要呼叫indexedDB.open()方法開啟資料庫，如果該資料存在，則發起開啟的請求，如果不存在，則發起建立並開啟的請求。該方法會返回一個IDBRequest物件，可以在該物件上添加回調方法。具體的方法如示例中的最外層請求。

回撥函式傳入的事件屬性event.target就指向該請求，即request。如果發生了錯誤，event.target.errorCode將會儲存錯誤資訊的錯誤碼；如果成功，event.target.result就會儲存一個數據庫例項物件。

錯誤碼列表（第二個開始省略字首IDBDatabaseException.）：

• IDBDatabaseException.UNKNOWN_ERR(1)：意外錯誤，無法歸類
• NON_TRANSIENT_ERR(2)：操作不合法
• NOT_FOUND_ERR(3)：未發現要操作的資料庫
• CONSTRAINT_ERR(4)：違反了資料庫約束
• DATA_ERR(5)：提供給事務的資料不滿足要求
• NOT_ALLOWED_ERR(6)：操作不合法
• TRANSACTION_INACTIVE_ERR(7)：試圖重用已完成的事務
• ABORT_ERR(8)：請求中斷，未完成
• READ_ONLY_ERR(9)：試圖在只讀模式下寫入或修改資料
• TIMEOUT_ERR(10)：在有效時間內未完成操作
• QUOTA_ERR(11)：磁碟空間不足

物件儲存空間（表）

成功開啟資料庫之後，我們就可以開啟物件儲存空間了，你可以把它理解成資料庫中的表，用於儲存不同的資料，如使用者、交易、購物車等。下面的所有db代表成功回撥中的資料庫物件.

我們先呼叫db.createObjectStore('dimensions', {keyPath:'name'});來建立一張表，這個dimensions為唯一表名，其中的keyPath屬性指定該表的鍵名，後面儲存的所有資料都必須擁有該屬性。

看下寫入資料庫的例項：

// 每次同步更新最新資料
$.ajax({
    url: '?r=tools/api/hosts',
    success: function (data) {
        // 如果能夠開啟本地資料庫，則儲存
        if (dbOpened) {
            const request = indexedDB.open('jomocha');
            request.onsuccess = function(event){
                const db = event.target.result;
                // 新建一個事務，讀寫模式，不可並行
                const transaction = db.transaction(['dimensions'], 'readwrite');
                // 開啟儲存物件
                const objectStore = transaction.objectStore('dimensions');
                // 使用put方法，有則修改，沒有則新增
                const request = objectStore.put({
                    name: 'host',
                    list: data.data
                });
            }
        }
    }
});

這裡寫入資料庫的物件裡就包含了name引數。我們拿到資料使用add()或put()方法新增資料，這兩種方法區別在於遇到相同的鍵名存在時，add()報錯，put()修改原有值。這兩種方法依然為請求，可以對其指定onsuccess()或onerror()事件處理回撥，示例中省略了。

事務

在建立完成資料後，就可以對其進行查詢了，indexedDB中所有讀寫操作都要通過事務，我們呼叫db.transaction();方法來開啟所有儲存空間（表），也可以傳入引數來控制我們需要開啟的表：

// 開啟一張表
db.transaction('user');
// 開啟多張表
db.transaction(['user', 'dimensions']);

該方法還接受第二個引數作為訪問方式，包含3種：readonly(預設值)、readwrite、versionchange。最後一個比較特別，為在版本更新時使用，不可以與其他事務併發執行，允許任何操作，包括刪除和建立索引。

現在通過事務我們已經確定了操作空間，接下來就可以獲取具體的資料物件了，下面的transaction代表著上面的db.transaction()方法返回的事務。事務可以執行多個請求，本身也是一個請求，可以指定相應的oncomplete()和onerror()事件處理回撥。其中的oncomplete()事件不能拿到該事務中請求的資料。

使用transaction.objectStore('dimension');獲取資料物件，然後就可以通過add/put/get/delete/clear方法進行增刪查改，均為請求，需要設定onsuccess()和onerror()回撥。

遊標遍歷

我們可以使用get()方法檢索出具體的單個物件，但是如果需要遍歷，我們就要使用到遊標查詢了，也就是指定範圍，然後遍歷資料。下面的objectStore指代上面transaction.objectStore()返回的資料物件集。

// 指定遊標範圍
const cursorRange = IDBKeyRange.bound('001', '100');
// 開啟遊標查詢
const request = objectStore.openCursor(cursorRange);
request.onsuccess = function (event) {
    const cursor = event.target.result;
    // 必須檢查cursor是否存在，如果該項存在，則為IDBCursor例項，否則為null
    if (cursor) {
        console.log(cursor.key + ': ' + cursor.value);
        cursor.continue();
    } else {
        console.log('遍歷完成');
    }
}
request.onerror = function (event) {
    console.error('遊標區間獲取失敗');
}

在遊標遍歷時，具體的資料會儲存在event.target.result裡，如果該項存在，則會為一個IDBCursor物件例項，否則為null。例項的屬性：

• direction：數值，表示遊標的方向，next/nextunique/prev/prevunique，帶有unique的會去重
• key：資料物件鍵
• value：資料物件值
• primaryKey：遊標當前的使用鍵值，後面會說

在遍歷到遊標中具體的每一項時，可以使用update()和delete()來修改，如果想要移動遊標：

• continue(key)：存在key移動到指定項，否則下一項
• advance(count)：存在count移動指定項數，否則上一項

我們通過IDBKeyRange物件來控制鍵範圍，有4種方式指定：

• only(key)：只取得想要的鍵值對，等同於直接呼叫get(key)
• lowerBound(key, true)：第一個元素為key，如果第二個引數為true，從該項的下一項開始，預設值為false
• upperBound(key, true)：最後一個元素為key，如果第二個引數為true，從該項的下一項開始，預設值為false
• bound(lowerkey, upperkey, true, true)：前兩者的結合，1和3對應lower，2和4對應upper

openCursor()方法接收的第一個引數為範圍區間，如果為null，則預設全部範圍；第二個引數為方向，為next/nextunique/prev/prevunique四個，帶有unique的會去重

索引

可以使用objectStore.createIndex('name', 'name', {unique: true});來建立索引，分別為索引名，索引的屬性名，該屬性值是否唯一。呼叫objectStore.delete('name');來刪除索引。刪除索引不會影響資料，所以沒有回撥函式。

如果我們不想在主鍵上遍歷遊標或者獲取資料，可以在資料集上取得新的索引列表：

// 直接切換索引
const index = objectStore('dimensions');
// 在該索引上進行遊標遍歷
request = index.openCursor();

如果我們在非主鍵的遊標中，想要去的主鍵值，呼叫index.getKey('007');

併發問題

資料庫操作存在併發問題，但由於是非同步，我們不用擔心，但是如果存在新版本變更還是會導致問題。所以開啟資料庫時指定onversionchange()處理事件，可以避免這個問題，在setVesion()時，如果觸發onerror()代表已經打開了該資料庫，無法現在更新版本，提示使用者關閉其它網頁，重新呼叫更新。

總結

如果需要與伺服器實時互動，使用cookie，如果需要儲存一些小資訊欄位，使用localStorage，如果只需要本次會話有效，使用sessionStorage，如果資料很大，使用indexedDB。使用什麼技術跟業務場景匹配，但是技術還是都要了解都要會，畢竟，巧婦難為無米之炊。

參考資料