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

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

要點(diǎn)

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

Lockr

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

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

其他功能包括：

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

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

一個(gè)1KB的庫(kù)，用於使用localStorage作為通信通道來促進(jìn)同一瀏覽器中選項(xiàng)卡之間的消息交換。包含庫(kù)後，以下是您可以使用的示例代碼：

// 發(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)於該庫(kù)的信息。

Barn

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

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

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

store.js

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

基本API在以下代碼中的註釋中進(jìn)行了解釋：

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

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

此外，還有一些更高級(jí)的功能：

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詳細(xì)介紹了瀏覽器支持的深度以及需要考慮的潛在錯(cuò)誤和陷阱（例如，某些瀏覽器不允許在隱私模式下使用本地存儲(chǔ)）。

lscache

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

lscache公開了以下方法，在代碼中的註釋中進(jìn)行了描述：

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

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

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

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

與之前的庫(kù)一樣，這個(gè)庫(kù)也處理序列化，因此您可以存儲(chǔ)和檢索對(duì)象：

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

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

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

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

最後，lscache允許您將數(shù)據(jù)劃分到“桶”中?？纯催@段代碼：

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

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

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

// 刷新整個(gè)緩存項(xiàng)目
lscache.flush();

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

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

secStore.js

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

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

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

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

請(qǐng)注意使用的set()方法，它傳入您指定的選項(xiàng)（包括自定義數(shù)據(jù)）以及允許您測(cè)試結(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，您可以在選項(xiàng)中定義：

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

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

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

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

關(guān)於localForage的其他一些要點(diǎn)：

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

Basil.js

Basil.js被描述為一個(gè)統(tǒng)一的localStorage、sessionStorage和cookie API，它包含一些獨(dú)特且非常易於使用的功能。基本方法可以按如下所示使用：

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

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

您還可以使用Basil.js來測(cè)試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'中存儲(chǔ)'SitePoint'
store.set('website', 'SitePoint');

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

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

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

最後，在選項(xiàng)對(duì)像中，您可以使用選項(xiàng)對(duì)象定義以下內(nèi)容：

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

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

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

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

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

lz-string

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

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

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

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

// 刷新整個(gè)緩存項(xiàng)目
lscache.flush();

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

請(qǐng)注意compress()和decompress()方法的使用。上面代碼中的註釋顯示了壓縮前後的長(zhǎng)度值。您可以看到這將多麼有益，因?yàn)榭蛻舳舜鎯?chǔ)總是空間有限。

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

值得一提的 (Honorable Mentions)

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

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

您知道其他庫(kù)嗎？

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

(文章剩餘部分為FAQ，已根據(jù)原文進(jìn)行改寫和精簡(jiǎn)，並保持原意)

關(guān)於JavaScript本地存儲(chǔ)庫(kù)的常見問題 (FAQ)

問：使用JavaScript本地存儲(chǔ)庫(kù)的好處是什麼？

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

問：JavaScript中的本地存儲(chǔ)是如何工作的？

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

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

答：雖然本地存儲(chǔ)提供了一種方便的方式來在客戶端存儲(chǔ)數(shù)據(jù)，但不建議將其用於存儲(chǔ)敏感數(shù)據(jù)。這是因?yàn)楸镜卮鎯?chǔ)並非設(shè)計(jì)為安全的存儲(chǔ)機(jī)制。存儲(chǔ)在本地存儲(chǔ)中的數(shù)據(jù)可以使用簡(jiǎn)單的JavaScript代碼輕鬆訪問和操作。因此，不應(yīng)將密碼、信用卡號(hào)碼或個(gè)人用戶信息等敏感數(shù)據(jù)存儲(chǔ)在本地存儲(chǔ)中。

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

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

問：一些流行的JavaScript本地存儲(chǔ)庫(kù)有哪些？

答：有幾個(gè)流行的JavaScript本地存儲(chǔ)庫(kù)，包括store.js、localForage和js-cookie。 Store.js為本地存儲(chǔ)提供了一個(gè)簡(jiǎn)單且一致的API，並且可在所有主要瀏覽器上運(yùn)行。 LocalForage提供了一個(gè)強(qiáng)大的異步存儲(chǔ)API，並支持IndexedDB、WebSQL和localStorage。 Js-cookie是一個(gè)用於處理cookie的輕量級(jí)庫(kù)，可以在本地存儲(chǔ)不可用時(shí)用作後備。

問：如何檢查本地存儲(chǔ)是否可用？

答：您可以使用JavaScript中的簡(jiǎn)單try/catch塊來檢查本地存儲(chǔ)是否可用。 window.localStorage屬性可用於訪問本地存儲(chǔ)對(duì)象。如果此屬性存在並且可以用於設(shè)置和檢索項(xiàng)目，則本地存儲(chǔ)可用。

問：本地存儲(chǔ)的存儲(chǔ)限制是多少？

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

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

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

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

答：您可以使用clear()方法清除本地存儲(chǔ)中的所有數(shù)據(jù)。此方法不接受任何參數(shù)，並將從本地存儲(chǔ)中刪除所有項(xiàng)目。使用此方法時(shí)要小心，因?yàn)樗鼤?huì)永久刪除本地存儲(chǔ)中的所有數(shù)據(jù)。

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

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

以上是9 JavaScript庫(kù)，用於使用本地存儲(chǔ)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！