HTML5本地存儲API（Web存儲的一部分）擁有極佳的瀏覽器支持率，并在越來越多的應(yīng)用程序中得到應(yīng)用。它擁有簡單的API，但也存在一些類似于cookie的缺點。

過去一年左右，我遇到過不少使用localStorage API的工具和庫，因此我將它們整理到這篇文章中，并附帶一些代碼示例和功能討論。

要點

• HTML5本地存儲API得到了廣泛支持，并在應(yīng)用程序中越來越常用，但它也有一些類似于cookie的局限性。各種JavaScript庫已被開發(fā)出來以改進和擴展其功能。
• Lockr、store.js和lscache等庫為localStorage API提供了包裝器，提供了額外的使用方法和功能。這些包括存儲不同數(shù)據(jù)類型而無需手動轉(zhuǎn)換、更深入的瀏覽器支持以及對內(nèi)存對象緩存系統(tǒng)Memcached的模擬。
• secStore.js和localForage等一些庫提供了更專業(yè)的功能。secStore.js通過Stanford Javascript Crypto Library增加了一層安全性，而Mozilla構(gòu)建的localForage則提供了一個使用IndexedDB或WebSQL的異步存儲API。
• Basil.js和lz-string等其他庫提供了獨特的功能。Basil.js是一個統(tǒng)一的localStorage、sessionStorage和cookie API，允許定義命名空間、存儲方法優(yōu)先級和默認(rèn)存儲。lz-string允許通過壓縮在localStorage中存儲大量數(shù)據(jù)。

Lockr

Lockr是localStorage API的包裝器，允許您使用許多有用的方法和功能。例如，雖然localStorage僅限于存儲字符串，但Lockr允許您存儲不同數(shù)據(jù)類型，而無需自行進行轉(zhuǎn)換：

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 數(shù)字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 對象

其他功能包括：

• 使用Lockr.get()方法檢索所有鍵值對
• 使用Lockr.getAll()方法將所有鍵值對編譯成數(shù)組
• 使用Lockr.flush()方法刪除所有存儲的鍵值對
• 使用Lockr.sadd和Lockr.srem在哈希鍵下添加/刪除值

本地存儲橋接器 (The Local Storage Bridge)

一個1KB的庫，用于使用localStorage作為通信通道來促進同一瀏覽器中選項卡之間的消息交換。包含庫后，以下是您可以使用的示例代碼：

// 發(fā)送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 監(jiān)聽消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});

如所示，send()方法創(chuàng)建并發(fā)送消息，subscribe()方法允許您監(jiān)聽指定的消息。您可以在這篇博文中閱讀更多關(guān)于該庫的信息。

Barn

這個庫提供了一個類似Redis的API，在localStorage之上提供了一個“快速、原子化的持久存儲層”。以下是從repo的README中獲取的示例代碼片段。它演示了許多可用的方法。

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 數(shù)字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 對象

API的其他功能包括能夠使用起始/結(jié)束值獲取范圍、獲取項目數(shù)組以及壓縮整個數(shù)據(jù)存儲以節(jié)省空間。該repo包含所有方法及其功能的完整參考。

store.js

這是一個類似于Lockr的另一個包裝器，但這次通過回退提供了更深入的瀏覽器支持。README解釋說，“store.js在可用時使用localStorage，并在IE6和IE7中回退到userData行為。沒有Flash來減慢頁面加載速度。沒有cookie來增加網(wǎng)絡(luò)請求的負擔(dān)?！?/p>

基本API在以下代碼中的注釋中進行了解釋：

// 發(fā)送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 監(jiān)聽消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});

此外，還有一些更高級的功能：

var barn = new Barn(localStorage);

barn.set('key', 'val');
console.log(barn.get('key')); // val

barn.lpush('list', 'val1');
barn.lpush('list', 'val2');
console.log(barn.rpop('list')); // val1
console.log(barn.rpop('list')); // val2

barn.sadd('set', 'val1');
barn.sadd('set', 'val2');
barn.sadd('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2', 'val3']
barn.srem('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2']

GitHub repo上的README詳細介紹了瀏覽器支持的深度以及需要考慮的潛在錯誤和陷阱（例如，某些瀏覽器不允許在隱私模式下使用本地存儲）。

lscache

lscache是另一個localStorage包裝器，但具有一些額外功能。您可以將其用作簡單的localStorage API，也可以使用模擬Memcached（內(nèi)存對象緩存系統(tǒng)）的功能。

lscache公開了以下方法，在代碼中的注釋中進行了描述：

// 在'website'中存儲'SitePoint'
store.set('website', 'SitePoint');

// 獲取'website'
store.get('website');

// 刪除'website'
store.remove('website');

// 清除所有鍵
store.clear();

與之前的庫一樣，這個庫也處理序列化，因此您可以存儲和檢索對象：

// 存儲對象字面量；在后臺使用JSON.stringify
store.set('website', {
  name: 'SitePoint',
  loves: 'CSS'
});

// 獲取存儲的對象；在后臺使用JSON.parse
var website = store.get('website');
console.log(website.name + ' loves ' + website.loves);

// 獲取所有存儲的值
console.log(store.getAll());

// 循環(huán)遍歷所有存儲的值
store.forEach(function(key, val) {
  console.log(key, val);
});

最后，lscache允許您將數(shù)據(jù)劃分到“桶”中。看看這段代碼：

// 設(shè)置一個帶有2分鐘過期時間的問候語
lscache.set('greeting', 'Hello World!', 2);

// 獲取并顯示問候語
console.log(lscache.get('greeting'));

// 刪除問候語
lscache.remove('greeting');

// 刷新整個緩存項目
lscache.flush();

// 只刷新過期的項目
lscache.flushExpired();

請注意，在第二個日志中，結(jié)果為null。這是因為我在記錄結(jié)果之前設(shè)置了一個自定義桶。一旦我設(shè)置了一個桶，在此之前添加到lscache的任何內(nèi)容都將無法訪問，即使我嘗試刷新它也是如此。只有“other”桶中的項目是可訪問或可刷新的。然后，當(dāng)我重置桶時，我能夠再次訪問我的原始數(shù)據(jù)。

secStore.js

secStore.js是一個數(shù)據(jù)存儲API，它通過Stanford Javascript Crypto Library添加了一層可選的安全層。secStore.js允許您選擇存儲方法：localStorage、sessionStorage或cookie。要使用secStore.js，您還必須包含前面提到的sjcl.js庫。

以下是一個示例，演示如何在將encrypt選項設(shè)置為“true”的情況下保存一些數(shù)據(jù)：

lscache.set('website', {
  'name': 'SitePoint',
  'category': 'CSS'
}, 4);

// 從對象中檢索數(shù)據(jù)
console.log(lscache.get('website').name);
console.log(lscache.get('website').category);

請注意使用的set()方法，它傳入您指定的選項（包括自定義數(shù)據(jù)）以及允許您測試結(jié)果的回調(diào)函數(shù)。然后，我們可以使用get()方法檢索該數(shù)據(jù)：

lscache.set('website', 'SitePoint', 2);
console.log(lscache.get('website')); // 'SitePoint'

lscache.setBucket('other');
console.log(lscache.get('website')); // null

lscache.resetBucket();
console.log(lscache.get('website')); // 'SitePoint'

如果您想使用sessionStorage或cookie而不是secStore.js中的localStorage，您可以在選項中定義：

var storage = new secStore;
var options = {
    encrypt: true,
      data: {
        key: 'data goes here'
      }
    };

storage.set(options, function(err, results) {
  if (err) throw err;
  console.log(results);
});

localForage

這個由Mozilla構(gòu)建的庫為您提供了一個簡單的類似localStorage的API，但通過IndexedDB或WebSQL使用異步存儲。API與localStorage（getItem()、setItem()等）完全相同，只是它的API是異步的，語法需要使用回調(diào)。

因此，例如，無論您設(shè)置還是獲取值，您都不會獲得返回值，但您可以處理傳遞給回調(diào)函數(shù)的數(shù)據(jù)，并且（可選）處理錯誤：

Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 數(shù)字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 對象

關(guān)于localForage的其他一些要點：

• 支持使用JavaScript Promise
• 與其他庫一樣，不僅限于存儲字符串，還可以設(shè)置和獲取對象
• 允許您使用config()方法設(shè)置數(shù)據(jù)庫信息

Basil.js

Basil.js被描述為一個統(tǒng)一的localStorage、sessionStorage和cookie API，它包含一些獨特且非常易于使用的功能?；痉椒梢园慈缦滤臼褂茫?/p>

// 發(fā)送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 監(jiān)聽消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});

您還可以使用Basil.js來測試localStorage是否可用：

var barn = new Barn(localStorage);

barn.set('key', 'val');
console.log(barn.get('key')); // val

barn.lpush('list', 'val1');
barn.lpush('list', 'val2');
console.log(barn.rpop('list')); // val1
console.log(barn.rpop('list')); // val2

barn.sadd('set', 'val1');
barn.sadd('set', 'val2');
barn.sadd('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2', 'val3']
barn.srem('set', 'val3');
console.log(barn.smembers('set')); // ['val1', 'val2']

Basil.js還允許您使用cookie或sessionStorage：

// 在'website'中存儲'SitePoint'
store.set('website', 'SitePoint');

// 獲取'website'
store.get('website');

// 刪除'website'
store.remove('website');

// 清除所有鍵
store.clear();

最后，在選項對象中，您可以使用選項對象定義以下內(nèi)容：

• 數(shù)據(jù)不同部分的命名空間
• 要使用的存儲方法的優(yōu)先級順序
• 默認(rèn)存儲方法
• cookie的過期日期

// 存儲對象字面量；在后臺使用JSON.stringify
store.set('website', {
  name: 'SitePoint',
  loves: 'CSS'
});

// 獲取存儲的對象；在后臺使用JSON.parse
var website = store.get('website');
console.log(website.name + ' loves ' + website.loves);

// 獲取所有存儲的值
console.log(store.getAll());

// 循環(huán)遍歷所有存儲的值
store.forEach(function(key, val) {
  console.log(key, val);
});

lz-string

lz-string實用程序允許您通過使用壓縮在localStorage中存儲大量數(shù)據(jù)，并且它非常易于使用。在頁面上包含庫后，您可以執(zhí)行以下操作：

// 設(shè)置一個帶有2分鐘過期時間的問候語
lscache.set('greeting', 'Hello World!', 2);

// 獲取并顯示問候語
console.log(lscache.get('greeting'));

// 刪除問候語
lscache.remove('greeting');

// 刷新整個緩存項目
lscache.flush();

// 只刷新過期的項目
lscache.flushExpired();

請注意compress()和decompress()方法的使用。上面代碼中的注釋顯示了壓縮前后的長度值。您可以看到這將多么有益，因為客戶端存儲總是空間有限。

正如庫文檔中所解釋的，可以選擇將數(shù)據(jù)壓縮為Uint8Array（JavaScript中一種較新的數(shù)據(jù)類型），甚至可以壓縮數(shù)據(jù)以在客戶端外部存儲。

值得一提的 (Honorable Mentions)

上述工具可能可以幫助您完成在localStorage中幾乎所有想要做的事情，但如果您正在尋找更多內(nèi)容，以下是一些您可能想要查看的更多相關(guān)工具和庫。

• LokiJS – 一個快速、內(nèi)存中的面向文檔的數(shù)據(jù)存儲，適用于node.js、瀏覽器和Cordova。
• AngularJS的客戶端存儲 – Angular JS的命名空間客戶端存儲。寫入localStorage，并回退到cookie。除了Angular核心之外沒有其他外部依賴項；不依賴于ngCookies。
• AlaSQL.js – 瀏覽器的JavaScript SQL數(shù)據(jù)庫和Node.js。處理傳統(tǒng)的關(guān)聯(lián)表和嵌套JSON數(shù)據(jù)（NoSQL）。從localStorage、IndexedDB或Excel導(dǎo)出、存儲和導(dǎo)入數(shù)據(jù)。
• angular-locker – Angular項目中本地/會話存儲的簡單且可配置的抽象，提供功能強大且易于使用的流暢API。
• jsCache – 使用localStorage啟用JavaScript文件、CSS樣式表和圖像的緩存。
• LargeLocalStorage – 克服各種瀏覽器缺陷，在客戶端提供大型鍵值存儲。

您知道其他庫嗎？

如果您在localStorage API或相關(guān)工具之上構(gòu)建了一些增強客戶端存儲的工具，請隨時在評論中告訴我們。

(文章剩余部分為FAQ，已根據(jù)原文進行改寫和精簡，并保持原意)

關(guān)于JavaScript本地存儲庫的常見問題 (FAQ)

問：使用JavaScript本地存儲庫的好處是什么？

答：JavaScript本地存儲庫提供了許多好處。它們提供了一種更有效的方式來在客戶端存儲數(shù)據(jù)，這可以顯著提高Web應(yīng)用程序的性能。這些庫還提供了比傳統(tǒng)數(shù)據(jù)存儲方法更高的安全級別，因為它們允許數(shù)據(jù)加密。此外，它們還為數(shù)據(jù)管理提供了更用戶友好的界面，使開發(fā)人員更容易使用本地存儲。

問：JavaScript中的本地存儲是如何工作的？

答：JavaScript中的本地存儲允許Web應(yīng)用程序在Web瀏覽器中持久存儲數(shù)據(jù)。與cookie不同，本地存儲不會過期，也不會發(fā)送回服務(wù)器，這使其成為一種更有效的數(shù)據(jù)存儲方法。存儲在本地存儲中的數(shù)據(jù)會跨瀏覽器會話保存，這意味著即使關(guān)閉并重新打開瀏覽器，它仍然可用。

問：我可以將本地存儲用于敏感數(shù)據(jù)嗎？

答：雖然本地存儲提供了一種方便的方式來在客戶端存儲數(shù)據(jù)，但不建議將其用于存儲敏感數(shù)據(jù)。這是因為本地存儲并非設(shè)計為安全的存儲機制。存儲在本地存儲中的數(shù)據(jù)可以使用簡單的JavaScript代碼輕松訪問和操作。因此，不應(yīng)將密碼、信用卡號碼或個人用戶信息等敏感數(shù)據(jù)存儲在本地存儲中。

問：如何管理本地存儲中的數(shù)據(jù)？

答：管理本地存儲中的數(shù)據(jù)涉及三個主要操作：設(shè)置項目、獲取項目和刪除項目。要設(shè)置項目，您可以使用setItem()方法，該方法接受兩個參數(shù)：鍵和值。要檢索項目，您可以使用getItem()方法，該方法接受鍵作為參數(shù)并返回相應(yīng)的值。要刪除項目，您可以使用removeItem()方法，該方法接受鍵作為參數(shù)。

問：一些流行的JavaScript本地存儲庫有哪些？

答：有幾個流行的JavaScript本地存儲庫，包括store.js、localForage和js-cookie。 Store.js為本地存儲提供了一個簡單且一致的API，并且可在所有主要瀏覽器上運行。 LocalForage提供了一個強大的異步存儲API，并支持IndexedDB、WebSQL和localStorage。 Js-cookie是一個用于處理cookie的輕量級庫，可以在本地存儲不可用時用作后備。

問：如何檢查本地存儲是否可用？

答：您可以使用JavaScript中的簡單try/catch塊來檢查本地存儲是否可用。window.localStorage屬性可用于訪問本地存儲對象。如果此屬性存在并且可以用于設(shè)置和檢索項目，則本地存儲可用。

問：本地存儲的存儲限制是多少？

答：本地存儲的存儲限制因不同的瀏覽器而異，但通常約為5MB。這比cookie的存儲限制（只有4KB）要大得多。但是，最好還是注意您在本地存儲中存儲的數(shù)據(jù)量，因為過多的數(shù)據(jù)可能會減慢Web應(yīng)用程序的速度。

問：本地存儲可以在不同的瀏覽器之間共享嗎？

答：不可以，本地存儲不能在不同的瀏覽器之間共享。每個Web瀏覽器都有自己獨立的本地存儲，因此在一個瀏覽器中存儲的數(shù)據(jù)在另一個瀏覽器中將不可用。在設(shè)計依賴于本地存儲的Web應(yīng)用程序時，這一點很重要。

問：如何清除本地存儲中的所有數(shù)據(jù)？

答：您可以使用clear()方法清除本地存儲中的所有數(shù)據(jù)。此方法不接受任何參數(shù)，并將從本地存儲中刪除所有項目。使用此方法時要小心，因為它會永久刪除本地存儲中的所有數(shù)據(jù)。

問：本地存儲可以在移動設(shè)備上使用嗎？

答：可以，本地存儲可以在移動設(shè)備上使用。大多數(shù)現(xiàn)代移動Web瀏覽器都支持本地存儲，因此您可以在臺式機和移動設(shè)備上使用它來存儲數(shù)據(jù)。但是，移動設(shè)備上的存儲限制可能較低，因此在設(shè)計Web應(yīng)用程序時務(wù)必考慮這一點。

以上是9 JavaScript庫，用于使用本地存儲的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！