前言

前端的數(shù)據(jù)存儲(chǔ)方式，你除了用過(guò) Cookies、localStorage 和 sessionStorage 外，還有用過(guò)其它的存儲(chǔ)方式么?其實(shí)除了前面提到的 3 種存儲(chǔ)方式，目前主流的瀏覽器還支持 Web SQL 和 IndexedDB。

目前市場(chǎng)上主流的瀏覽器有 Chrome 、Safari、Firefox、Opera、UC Browser 和 Internet Explorer 等，其中截止 2020 年 5 月，Chrome 的市場(chǎng)占有率為 「63.93%」，遠(yuǎn)遠(yuǎn)超過(guò)第二名 Safari 瀏覽(「18.19%」)。

這里我們以市場(chǎng)占有率第一的 Chrome 瀏覽器為例，來(lái)了解一下它支持的所有存儲(chǔ)方案：

(打開(kāi) Chrome 開(kāi)發(fā)者工具，切換至 Application 欄位)

在介紹目前比較流行的一些開(kāi)源的前端存儲(chǔ)方案之前，阿寶哥先分享一些與存儲(chǔ)有關(guān)，有趣好玩的開(kāi)源庫(kù)。

一、有趣好玩的開(kāi)源庫(kù)

1.1 Sharedb

❝ 
 
Realtime database backend based on Operational Transformation (OT)。 
 
https://github.com/share/sharedb 
 
❞ 

ShareDB 是一個(gè)基于 JSON 文檔操作轉(zhuǎn)換(OT)的實(shí)時(shí)數(shù)據(jù)庫(kù)后端。它是 DerbyJS Web 應(yīng)用程序框架的實(shí)時(shí)后端。

「示例1：實(shí)時(shí)數(shù)據(jù)同步」

「示例2：展示實(shí)時(shí)查詢(xún)的排行榜應(yīng)用程序」

1.2 ImmortalDB

❝ 
 
A relentless key-value store for the browser。 
 
https://github.com/gruns/ImmortalDB 
 
❞ 

ImmortalDB 是在瀏覽器中存儲(chǔ)持久鍵值數(shù)據(jù)的最佳方法。保存到 ImmortalDB 的數(shù)據(jù)被冗余地存儲(chǔ)在 Cookies，IndexedDB 和 localStorage 中，并且如果其中的任何數(shù)據(jù)被刪除或損壞，它們將不斷進(jìn)行自我修復(fù)。

例如，清除 Cookie 是一種常見(jiàn)的用戶(hù)操作，即使對(duì)于非技術(shù)用戶(hù)也是如此。在存儲(chǔ)壓力下，瀏覽器在沒(méi)有警告的情況下隨意刪除 IndexedDB、localStorage 或 sessionStorage。

「示例」

import { ImmortalDB } from 'immortal-db' 
 
await ImmortalDB.set('name', 'semlinker'); // Set 
await ImmortalDB.get('name', default='lolo'); // Get 
await ImmortalDB.remove('name'); // Remove  

1.3 web-storage-cache

對(duì) localStorage 和 sessionStorage 進(jìn)行了擴(kuò)展，添加了超時(shí)時(shí)間，序列化方法。

https://github.com/wuchangming/web-storage-cache

WebStorageCache 對(duì) HTML5 localStorage 和 sessionStorage 進(jìn)行了擴(kuò)展，「添加了超時(shí)時(shí)間，序列化方法」。可以直接存儲(chǔ) JSON 對(duì)象，同時(shí)可以非常簡(jiǎn)單的進(jìn)行超時(shí)時(shí)間的設(shè)置。

優(yōu)化：WebStorageCache 自動(dòng)清除訪問(wèn)的過(guò)期數(shù)據(jù)，避免了過(guò)期數(shù)據(jù)的累積。另外也提供了清除全部過(guò)期數(shù)據(jù)的方法：wsCache.deleteAllExpires();

「示例」

var wsCache = new WebStorageCache(); 
 
// 緩存字符串'wqteam' 到 'username' 中, 超時(shí)時(shí)間100秒 
wsCache.set('username', 'wqteam', {exp : 100}); 
 
// 超時(shí)截止日期，可用使用Date類(lèi)型 
var nextYear = new Date(); 
nextYear.setFullYear(nextYear.getFullYear() + 1); 
wsCache.set('username', 'wqteam', {exp : nextYear}); 
 
// 獲取緩存中 'username' 的值 
wsCache.get('username'); 
 
// 緩存簡(jiǎn)單js對(duì)象，默認(rèn)使用序列化方法為JSON.stringify。 
// 可以通過(guò)初始化wsCache的時(shí)候配置serializer.serialize 
wsCache.set('user', { name: 'Wu', organization: 'wqteam'}); 

1.4 lz-string

LZ-based compression algorithm for JavaScript。

https://github.com/pieroxy/lz-string/

lz-string 旨在滿(mǎn)足在 localStorage 中(尤其是在移動(dòng)設(shè)備上)存儲(chǔ)大量數(shù)據(jù)的需求。localStorage 通常限制為 5MB ~10MB，你可以通過(guò)對(duì)數(shù)據(jù)進(jìn)行壓縮，以存儲(chǔ)更多的數(shù)據(jù)。

「示例」

var string = "Hello, my name is semlinker"; 
console.log("Size of sample is: " + string.length); 
 
var compressed = LZString.compress(string); 
console.log("Size of compressed sample is: " + compressed.length); 
 
string = LZString.decompress(compressed); 
console.log("Sample is: " + string); 

下圖是使用官方在線示例進(jìn)行字符串壓縮測(cè)試的結(jié)果：

(圖片來(lái)源：https://pieroxy.net/blog/pages/lz-string/demo.html)

接下來(lái)我們開(kāi)始來(lái)介紹一些主流的數(shù)據(jù)庫(kù)。

二、主流的數(shù)據(jù)庫(kù)

2.1 localForage

Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.

https://github.com/localForage/localForage

localForage 是一個(gè)快速簡(jiǎn)單的 JavaScript 存儲(chǔ)庫(kù)。它通過(guò)使用類(lèi)似于 localStorage 的簡(jiǎn)單 API 來(lái)使用異步存儲(chǔ)(IndexedDB 或 WebSQL))，進(jìn)而改善你的 Web 應(yīng)用程序的離線體驗(yàn)。

對(duì)于不支持 IndexedDB 或 WebSQL 的瀏覽器，localForage 會(huì)使用 localStorage 進(jìn)行數(shù)據(jù)存儲(chǔ)。此外，localForage 還支持存儲(chǔ)所有可以序列化為 JSON 的原生 JS 對(duì)象以及 ArrayBuffers，Blob 和 TypedArrays。

localForage 主要支持的平臺(tái)：

• IE 10(IE 8+ 使用 localStorage)
• Opera 15(Opera 10.5+ 使用 localStorage)
• Firefox 18
• Safari 3.1(包括 Mobile Safari)
• Chrome 23、Chrome for Android 32
• Phonegap/Apache Cordova 1.2.0

2.2 PouchDB

- PouchDB is a pocket-sized database.

https://github.com/pouchdb/pouchdb

PouchDB 是一個(gè)瀏覽器內(nèi)數(shù)據(jù)庫(kù)，允許應(yīng)用程序在本地保存數(shù)據(jù)，以便用戶(hù)即使在離線時(shí)也可以享受應(yīng)用程序的所有功能。另外，數(shù)據(jù)在客戶(hù)端之間是同步的，因此用戶(hù)可以隨時(shí)隨地保持最新?tīng)顟B(tài)。

PouchDB 也在 Node.js 中運(yùn)行，可以用作與 「CouchDB」 兼容的服務(wù)器的直接接口。該 API 在每個(gè)環(huán)境中工作都是相同的，因此你可以花更少的時(shí)間來(lái)?yè)?dān)心瀏覽器的差異，而花更多的時(shí)間來(lái)編寫(xiě)干凈、一致的代碼。

PouchDB 支持所有現(xiàn)代瀏覽器：

• Firefox 29+ (Including Firefox OS and Firefox for Android)
• Chrome 30+
• Safari 5+
• Internet Explorer 10+
• Opera 21+
• Android 4.0+
• iOS 7.1+
• Windows Phone 8+

PouchDB 在幕后使用 IndexedDB，若當(dāng)前環(huán)境不支持 IndexedDB 則回退到 Web SQL。

2.3 Rxdb

A realtime Database for JavaScript Applications.

https://github.com/pubkey/rxdb

RxDB(Reactive Database 的縮寫(xiě))是 NoSQL 數(shù)據(jù)庫(kù)，用于 JavaScript 應(yīng)用程序，如網(wǎng)站，混合應(yīng)用程序，Electron Apps，Progressive Web Apps 和 Node.js。響應(yīng)式意味著你不僅可以查詢(xún)當(dāng)前狀態(tài)，還可以訂閱所有狀態(tài)更改，比如查詢(xún)的結(jié)果或文檔的單個(gè)字段。

這對(duì)于基于 UI 的實(shí)時(shí)應(yīng)用程序非常有用，因?yàn)樗子陂_(kāi)發(fā)，并且具有很大的性能優(yōu)勢(shì)。為了在客戶(hù)端和服務(wù)器之間復(fù)制數(shù)據(jù)，RxDB 提供了用于與任何 CouchDB 兼容端點(diǎn)以及自定義 GraphQL 端點(diǎn)進(jìn)行實(shí)時(shí)復(fù)制的模塊。

RxDB 支持以下特性：

• Mango-Query：支持 mquery API 從集合中獲取數(shù)據(jù)，支持鏈?zhǔn)降?mongoDB 查詢(xún)風(fēng)格。
• Replication：因?yàn)?RxDB 依賴(lài)于 PouchDB，因此很容易實(shí)現(xiàn)終端設(shè)備與服務(wù)器之間的數(shù)據(jù)同步。
• Reactive：RxDB 使得同步 DOM 的狀態(tài)變得很簡(jiǎn)單。
• MultiWindow/Tab：當(dāng) RxDB 的兩個(gè)實(shí)例使用相同的存儲(chǔ)引擎，它們的狀態(tài)和操作流將會(huì)被廣播。這意味著對(duì)于兩個(gè)瀏覽器窗口，窗口 #1 的數(shù)據(jù)變化也會(huì)自動(dòng)影響窗口 #2 的數(shù)據(jù)狀態(tài)。
• Schema：通過(guò) jsonschema 來(lái)定義 Schemas，它們用來(lái)描述數(shù)據(jù)格式。
• Encryption：通過(guò)將模式字段設(shè)置為encrypted，該字段的值將以加密模式存儲(chǔ)，沒(méi)有密碼就無(wú)法讀取。

2.4 NeDB

The JavaScript Database, for Node.js, nw.js, electron and the browser.

https://github.com/louischatriot/nedb

NeDB 是一個(gè) JavaScript 數(shù)據(jù)庫(kù)，能夠運(yùn)行在 Node.js、nw.js、Electron 和瀏覽器環(huán)境。它是使用純的 JavaScript 實(shí)現(xiàn)，不依賴(lài)其它庫(kù)，提供的 API 是 MongoDB API 的子集，重要的是它的速度非?？欤?/p>

• 插入：10,680 ops/s
• 查找：43,290 ops/s
• 更新：8,000 ops/s。
• 刪除：11,750 ops/s。

ops (operation per second) 即表示每秒操作的次數(shù)。

2.5 Dexie.js

A Minimalistic Wrapper for IndexedDB.

https://github.com/dfahlander/Dexie.js

Dexie.js 是 IndexedDB 的包裝庫(kù)，它提供了一套經(jīng)過(guò)精心設(shè)計(jì)的 API，強(qiáng)大的錯(cuò)誤處理，較強(qiáng)的可擴(kuò)展性，此外它能夠跟蹤數(shù)據(jù)變化，支持 KeyRange (搜索不區(qū)分大小寫(xiě)，可設(shè)置匹方式和 OR 操作)。

Dexie.js 主要為了解決原生 IndexedDB API 中存在的三個(gè)主要問(wèn)題：

• 異常錯(cuò)誤處理。
• 較弱的查詢(xún)功能。
• 代碼復(fù)雜性。

為了便于開(kāi)發(fā)者接入 Dexie.js，在 Dexie.js 官網(wǎng)中提供了豐富的示例：

• React + Dexie
• React + Redux + Dexie
• Dexie with Typescript
• Angular + Dexie
• Dexie with Electron
• Full Text Search

以上只列出部分示例，了解更多示例請(qǐng)?jiān)L問(wèn)：Dexie.js - Samples(

https://dexie.org/docs/Samples)。最后我們來(lái)簡(jiǎn)單介紹一下各種 Web 存儲(chǔ)方案。

三、各種 Web 存儲(chǔ)方案簡(jiǎn)介

3.1 Cookie

HTTP Cookie(也叫 Web Cookie 或?yàn)g覽器 Cookie)是服務(wù)器發(fā)送到用戶(hù)瀏覽器并保存在本地的一小塊數(shù)據(jù)，它會(huì)在瀏覽器下次向同一服務(wù)器再發(fā)起請(qǐng)求時(shí)被攜帶并發(fā)送到服務(wù)器上。通常，它用于告知服務(wù)端兩個(gè)請(qǐng)求是否來(lái)自同一瀏覽器，如保持用戶(hù)的登錄狀態(tài)。

Cookie 主要用于以下三個(gè)方面：

• 會(huì)話狀態(tài)管理(如用戶(hù)登錄狀態(tài)、購(gòu)物車(chē)、游戲分?jǐn)?shù)或其它需要記錄的信息);
• 個(gè)性化設(shè)置(如用戶(hù)自定義設(shè)置、主題等);
• 瀏覽器行為跟蹤(如跟蹤分析用戶(hù)行為等)。

Cookie 的特點(diǎn)：

• Cookie 的大小受限，一般為 4 KB;
• 同一個(gè)域名下存放 Cookie 的個(gè)數(shù)是有限制的，不同瀏覽器的個(gè)數(shù)不一樣，一般為 20 個(gè);
• Cookie 支持設(shè)置過(guò)期時(shí)間，當(dāng)過(guò)期時(shí)自動(dòng)銷(xiāo)毀;
• 每次發(fā)起同域下的 HTTP 請(qǐng)求時(shí)，都會(huì)攜帶當(dāng)前域名下的 Cookie;
• 支持設(shè)置為 HttpOnly，防止 Cookie 被客戶(hù)端的 JavaScript 訪問(wèn)。

「示例1：簡(jiǎn)單用法」

document.cookie = "name=semlinker"; 
document.cookie = "favorite_food=tripe"; 
 
alert(document.cookie); 
// 顯示: name=semlinker;favorite_food=tripe 

「示例2：得到名為 test2 的 cookie」

document.cookie = "test1=Hello"; 
document.cookie = "test2=World"; 
 
var myCookie = document.cookie 
    .replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1"); 
alert(myCookie); 

3.2 localStorage

一種持久化的存儲(chǔ)方式，也就是說(shuō)如果不手動(dòng)清除，數(shù)據(jù)就永遠(yuǎn)不會(huì)過(guò)期。它是采用鍵值對(duì)的方式存儲(chǔ)數(shù)據(jù)，按域名將數(shù)據(jù)分別保存到對(duì)應(yīng)數(shù)據(jù)庫(kù)文件里。相比 Cookie 來(lái)說(shuō)，它能保存更大的數(shù)據(jù)。

localStorage 的特點(diǎn)：

• 大小限制為 5MB ~10MB;
• 在同源的所有標(biāo)簽頁(yè)和窗口之間共享數(shù)據(jù);
• 數(shù)據(jù)僅保存在客戶(hù)端，不與服務(wù)器進(jìn)行通信;
• 數(shù)據(jù)持久存在且不會(huì)過(guò)期，重啟瀏覽器后仍然存在;
• 對(duì)數(shù)據(jù)的操作是同步的。

「示例」

// 通過(guò)setItem()增加一個(gè)數(shù)據(jù)項(xiàng) 
localStorage.setItem('myName', 'Semlinker'); 
 
// 通過(guò)getItem()獲取某個(gè)數(shù)據(jù)項(xiàng) 
let me = localStorage.getItem('myName'); 
 
// 通過(guò)removeItem()移除某個(gè)數(shù)據(jù)項(xiàng) 
localStorage.removeItem('myName'); 
 
// 移除所有數(shù)據(jù)項(xiàng) 
localStorage.clear(); 

3.3 sessionStorage

與服務(wù)端的 session 類(lèi)似，sessionStorage 是一種會(huì)話級(jí)別的緩存，關(guān)閉瀏覽器時(shí)數(shù)據(jù)會(huì)被清除。需要注意的是 sessionStorage 的作用域是窗口級(jí)別的，也就是說(shuō)不同窗口之間保存的 sessionStorage 數(shù)據(jù)是不能共享的。

• sessionStorage 的特點(diǎn)：
• sessionStorage 的數(shù)據(jù)只存在于當(dāng)前瀏覽器的標(biāo)簽頁(yè);
• 數(shù)據(jù)在頁(yè)面刷新后依然存在，但在關(guān)閉瀏覽器標(biāo)簽頁(yè)之后數(shù)據(jù)就會(huì)被清除;
• 與 localStorage 擁有統(tǒng)一的 API 接口;
• 對(duì)數(shù)據(jù)的操作是同步的。

「示例」

// 通過(guò)setItem()增加一個(gè)數(shù)據(jù)項(xiàng) 
sessionStorage.setItem('myName', 'Semlinker'); 
 
// 通過(guò)getItem()獲取某個(gè)數(shù)據(jù)項(xiàng) 
let me = sessionStorage.getItem('myName'); 
 
// 通過(guò)removeItem()移除某個(gè)數(shù)據(jù)項(xiàng) 
sessionStorage.removeItem('myName'); 
 
// 移除所有數(shù)據(jù)項(xiàng) 
sessionStorage.clear(); 

3.4 Web SQL

Web SQL 數(shù)據(jù)庫(kù) API 實(shí)際上不是 HTML5 規(guī)范的一部分，而是一個(gè)單獨(dú)的規(guī)范，它引入了一組 API 來(lái)使用 SQL 來(lái)操作客戶(hù)端數(shù)據(jù)庫(kù)。需要注意的是，HTML5 已經(jīng)放棄 Web SQL 數(shù)據(jù)庫(kù)。

Web SQL Database 規(guī)范中定義的三個(gè)核心方法：

• openDatabase：這個(gè)方法使用現(xiàn)有數(shù)據(jù)庫(kù)或新建數(shù)據(jù)庫(kù)來(lái)創(chuàng)建數(shù)據(jù)庫(kù)對(duì)象;
• transaction：這個(gè)方法允許我們根據(jù)情況控制事務(wù)的提交或回滾;
• executeSql：這個(gè)方法用于執(zhí)行真實(shí)的 SQL 語(yǔ)句。

Web SQL 的特點(diǎn)(相比 Cookie、localStorage 與 sessionStorage)：

• Web SQL 能方便進(jìn)行對(duì)象存儲(chǔ);
• Web SQL 支持事務(wù)，能方便地進(jìn)行數(shù)據(jù)查詢(xún)和數(shù)據(jù)處理操作。

「示例」

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024); 
 
db.transaction(function (tx) {  
   // 執(zhí)行查詢(xún)操作 
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');  
   // 執(zhí)行插入操作 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');  
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');  
});  

3.5 IndexedDB

IndexedDB 是一種底層 API，用于客戶(hù)端存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)，包括文件、二進(jìn)制大型對(duì)象。該 API 使用索引來(lái)實(shí)現(xiàn)對(duì)該數(shù)據(jù)的高性能搜索。雖然 Web Storage 對(duì)于存儲(chǔ)較少量的數(shù)據(jù)很有用，但對(duì)于存儲(chǔ)更大量的結(jié)構(gòu)化數(shù)據(jù)來(lái)說(shuō)，這種方法不太好用。IndexedDB 提供了一個(gè)解決方案。

IndexedDB 的特點(diǎn)：

• 存儲(chǔ)空間大：存儲(chǔ)空間可以達(dá)到幾百兆甚至更多;
• 支持二進(jìn)制存儲(chǔ)：它不僅可以存儲(chǔ)字符串，而且還可以存儲(chǔ)二進(jìn)制數(shù)據(jù);
• IndexedDB 有同源限制，每一個(gè)數(shù)據(jù)庫(kù)只能在自身域名下能訪問(wèn)，不能跨域名訪問(wèn);
• 支持事務(wù)型：IndexedDB 執(zhí)行的操作會(huì)按照事務(wù)來(lái)分組的，在一個(gè)事務(wù)中，要么所有的操作都成功，要么所有的操作都失敗;
• 鍵值對(duì)存儲(chǔ)：IndexedDB 內(nèi)部采用對(duì)象倉(cāng)庫(kù)(object store)存放數(shù)據(jù)。所有類(lèi)型的數(shù)據(jù)都可以直接存入，包括 JavaScript 對(duì)象。對(duì)象倉(cāng)庫(kù)中，數(shù)據(jù)以 “鍵值對(duì)” 的形式保存，每一個(gè)數(shù)據(jù)記錄都有對(duì)應(yīng)的主鍵，主鍵是獨(dú)一無(wú)二的，不能有重復(fù)，否則會(huì)拋出一個(gè)錯(cuò)誤。
• 數(shù)據(jù)操作是異步的：使用 IndexedDB 執(zhí)行的操作是異步執(zhí)行的，以免阻塞應(yīng)用程序。

「示例」

var dbName = "my_db"; 
 
var request = indexedDB.open(dbName, 2); 
 
request.onerror = function(event) { 
  // 錯(cuò)誤處理 
}; 
 
request.onupgradeneeded = function(event) { 
  var db = event.target.result; 
 
  // 建立一個(gè)對(duì)象倉(cāng)庫(kù)來(lái)存儲(chǔ)我們客戶(hù)的相關(guān)信息，我們選擇 ssn 作為鍵路徑（key path） 
  // 因?yàn)?nbsp;ssn 可以保證是不重復(fù)的 
  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" }); 
 
  // 建立一個(gè)索引來(lái)通過(guò)姓名來(lái)搜索客戶(hù)。名字可能會(huì)重復(fù)，所以我們不能使用 unique 索引 
  objectStore.createIndex("name", "name", { unique: false }); 
 
  // 使用郵箱建立索引，我們確?？蛻?hù)的郵箱不會(huì)重復(fù)，所以我們使用 unique 索引 
  objectStore.createIndex("email", "email", { unique: true }); 
 
  // 使用事務(wù)的 oncomplete 事件確保在插入數(shù)據(jù)前對(duì)象倉(cāng)庫(kù)已經(jīng)創(chuàng)建完畢 
  objectStore.transaction.oncomplete = function(event) { 
    // 將數(shù)據(jù)保存到新創(chuàng)建的對(duì)象倉(cāng)庫(kù) 
    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers"); 
    customerData.forEach(function(customer) { 
      customerObjectStore.add(customer); 
    }); 
  }; 
}; 

篇幅有限這里我們只介紹了部分開(kāi)源庫(kù)，其實(shí)還有一些其它成熟的開(kāi)源庫(kù)，比如 lowdb(Local JSON Database)、Lovefield(Relational Database)和 LokiJS(NoSQL Database)等