HTML5本地存儲API（Web存儲的一部分）擁有極佳的瀏覽器支持率，並在越來越多的應用程序中得到應用。它擁有簡單的API，但也存在一些類似於cookie的缺點。
過去一年左右，我遇到過不少使用localStorage API的工具和庫，因此我將它們整理到這篇文章中，並附帶一些代碼示例和功能討論。
要點
Lockr
Lockr是localStorage API的包裝器，允許您使用許多有用的方法和功能。例如，雖然localStorage僅限於存儲字符串，但Lockr允許您存儲不同數據類型，而無需自行進行轉換：
Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象其他功能包括：
本地存儲橋接器 (The Local Storage Bridge)
一個1KB的庫，用於使用localStorage作為通信通道來促進同一瀏覽器中選項卡之間的消息交換。包含庫後，以下是您可以使用的示例代碼：
// 发送消息
lsbridge.send('my-namespace', {
message: 'Hello world!'
});
// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
console.log(data); // 打印：'Hello world!'
});如所示，send()方法創建並發送消息，subscribe()方法允許您監聽指定的消息。您可以在這篇博文中閱讀更多關於該庫的信息。
Barn
這個庫提供了一個類似Redis的API，在localStorage之上提供了一個“快速、原子化的持久存儲層”。以下是從repo的README中獲取的示例代碼片段。它演示了許多可用的方法。
Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象API的其他功能包括能夠使用起始/結束值獲取範圍、獲取項目數組以及壓縮整個數據存儲以節省空間。該repo包含所有方法及其功能的完整參考。
store.js
這是一個類似於Lockr的另一個包裝器，但這次通過回退提供了更深入的瀏覽器支持。 README解釋說，“store.js在可用時使用localStorage，並在IE6和IE7中回退到userData行為。沒有Flash來減慢頁面加載速度。沒有cookie來增加網絡請求的負擔。”
基本API在以下代碼中的註釋中進行了解釋：
// 发送消息
lsbridge.send('my-namespace', {
message: 'Hello world!'
});
// 监听消息
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（內存對象緩存系統）的功能。
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());
// 循环遍历所有存储的值
store.forEach(function(key, val) {
console.log(key, val);
});最後，lscache允許您將數據劃分到“桶”中。看看這段代碼：
// 设置一个带有2分钟过期时间的问候语
lscache.set('greeting', 'Hello World!', 2);
// 获取并显示问候语
console.log(lscache.get('greeting'));
// 删除问候语
lscache.remove('greeting');
// 刷新整个缓存项目
lscache.flush();
// 只刷新过期的项目
lscache.flushExpired();請注意，在第二個日誌中，結果為null。這是因為我在記錄結果之前設置了一個自定義桶。一旦我設置了一個桶，在此之前添加到lscache的任何內容都將無法訪問，即使我嘗試刷新它也是如此。只有“other”桶中的項目是可訪問或可刷新的。然後，當我重置桶時，我能夠再次訪問我的原始數據。
secStore.js
secStore.js是一個數據存儲API，它通過Stanford Javascript Crypto Library添加了一層可選的安全層。 secStore.js允許您選擇存儲方法：localStorage、sessionStorage或cookie。要使用secStore.js，您還必須包含前面提到的sjcl.js庫。
以下是一個示例，演示如何在將encrypt選項設置為“true”的情況下保存一些數據：
lscache.set('website', {
'name': 'SitePoint',
'category': 'CSS'
}, 4);
// 从对象中检索数据
console.log(lscache.get('website').name);
console.log(lscache.get('website').category);請注意使用的set()方法，它傳入您指定的選項（包括自定義數據）以及允許您測試結果的回調函數。然後，我們可以使用get()方法檢索該數據：
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構建的庫為您提供了一個簡單的類似localStorage的API，但通過IndexedDB或WebSQL使用異步存儲。 API與localStorage（getItem()、setItem()等）完全相同，只是它的API是異步的，語法需要使用回調。
因此，例如，無論您設置還是獲取值，您都不會獲得返回值，但您可以處理傳遞給回調函數的數據，並且（可選）處理錯誤：
Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象關於localForage的其他一些要點：
Basil.js
Basil.js被描述為一個統一的localStorage、sessionStorage和cookie API，它包含一些獨特且非常易於使用的功能。基本方法可以按如下所示使用：
// 发送消息
lsbridge.send('my-namespace', {
message: 'Hello world!'
});
// 监听消息
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();最後，在選項對像中，您可以使用選項對象定義以下內容：
// 存储对象字面量；在后台使用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());
// 循环遍历所有存储的值
store.forEach(function(key, val) {
console.log(key, val);
});lz-string
lz-string實用程序允許您通過使用壓縮在localStorage中存儲大量數據，並且它非常易於使用。在頁面上包含庫後，您可以執行以下操作：
// 设置一个带有2分钟过期时间的问候语
lscache.set('greeting', 'Hello World!', 2);
// 获取并显示问候语
console.log(lscache.get('greeting'));
// 删除问候语
lscache.remove('greeting');
// 刷新整个缓存项目
lscache.flush();
// 只刷新过期的项目
lscache.flushExpired();請注意compress()和decompress()方法的使用。上面代碼中的註釋顯示了壓縮前後的長度值。您可以看到這將多麼有益，因為客戶端存儲總是空間有限。
正如庫文檔中所解釋的，可以選擇將數據壓縮為Uint8Array（JavaScript中一種較新的數據類型），甚至可以壓縮數據以在客戶端外部存儲。
值得一提的 (Honorable Mentions)
上述工具可能可以幫助您完成在localStorage中幾乎所有想要做的事情，但如果您正在尋找更多內容，以下是一些您可能想要查看的更多相關工具和庫。
您知道其他庫嗎？
如果您在localStorage API或相關工具之上構建了一些增強客戶端存儲的工具，請隨時在評論中告訴我們。
(文章剩餘部分為FAQ，已根據原文進行改寫和精簡，並保持原意)
關於JavaScript本地存儲庫的常見問題 (FAQ)
問：使用JavaScript本地存儲庫的好處是什麼？
答：JavaScript本地存儲庫提供了許多好處。它們提供了一種更有效的方式來在客戶端存儲數據，這可以顯著提高Web應用程序的性能。這些庫還提供了比傳統數據存儲方法更高的安全級別，因為它們允許數據加密。此外，它們還為數據管理提供了更用戶友好的界面，使開發人員更容易使用本地存儲。
問：JavaScript中的本地存儲是如何工作的？
答：JavaScript中的本地存儲允許Web應用程序在Web瀏覽器中持久存儲數據。與cookie不同，本地存儲不會過期，也不會發送回服務器，這使其成為一種更有效的數據存儲方法。存儲在本地存儲中的數據會跨瀏覽器會話保存，這意味著即使關閉並重新打開瀏覽器，它仍然可用。
問：我可以將本地存儲用於敏感數據嗎？
答：雖然本地存儲提供了一種方便的方式來在客戶端存儲數據，但不建議將其用於存儲敏感數據。這是因為本地存儲並非設計為安全的存儲機制。存儲在本地存儲中的數據可以使用簡單的JavaScript代碼輕鬆訪問和操作。因此，不應將密碼、信用卡號碼或個人用戶信息等敏感數據存儲在本地存儲中。
問：如何管理本地存儲中的數據？
答：管理本地存儲中的數據涉及三個主要操作：設置項目、獲取項目和刪除項目。要設置項目，您可以使用setItem()方法，該方法接受兩個參數：鍵和值。要檢索項目，您可以使用getItem()方法，該方法接受鍵作為參數並返回相應的值。要刪除項目，您可以使用removeItem()方法，該方法接受鍵作為參數。
問：一些流行的JavaScript本地存儲庫有哪些？
答：有幾個流行的JavaScript本地存儲庫，包括store.js、localForage和js-cookie。 Store.js為本地存儲提供了一個簡單且一致的API，並且可在所有主要瀏覽器上運行。 LocalForage提供了一個強大的異步存儲API，並支持IndexedDB、WebSQL和localStorage。 Js-cookie是一個用於處理cookie的輕量級庫，可以在本地存儲不可用時用作後備。
問：如何檢查本地存儲是否可用？
答：您可以使用JavaScript中的簡單try/catch塊來檢查本地存儲是否可用。 window.localStorage屬性可用於訪問本地存儲對象。如果此屬性存在並且可以用於設置和檢索項目，則本地存儲可用。
問：本地存儲的存儲限制是多少？
答：本地存儲的存儲限制因不同的瀏覽器而異，但通常約為5MB。這比cookie的存儲限制（只有4KB）要大得多。但是，最好還是注意您在本地存儲中存儲的數據量，因為過多的數據可能會減慢Web應用程序的速度。
問：本地存儲可以在不同的瀏覽器之間共享嗎？
答：不可以，本地存儲不能在不同的瀏覽器之間共享。每個Web瀏覽器都有自己獨立的本地存儲，因此在一個瀏覽器中存儲的數據在另一個瀏覽器中將不可用。在設計依賴於本地存儲的Web應用程序時，這一點很重要。
問：如何清除本地存儲中的所有數據？
答：您可以使用clear()方法清除本地存儲中的所有數據。此方法不接受任何參數，並將從本地存儲中刪除所有項目。使用此方法時要小心，因為它會永久刪除本地存儲中的所有數據。
問：本地存儲可以在移動設備上使用嗎？
答：可以，本地存儲可以在移動設備上使用。大多數現代移動Web瀏覽器都支持本地存儲，因此您可以在台式機和移動設備上使用它來存儲數據。但是，移動設備上的存儲限制可能較低，因此在設計Web應用程序時務必考慮這一點。
以上是9 JavaScript庫，用於使用本地存儲的詳細內容。更多資訊請關注PHP中文網其他相關文章！
