9 JavaScript庫，用於使用本地存儲-js教程-PHP中文網

首頁

web前端

js教程

9 JavaScript庫，用於使用本地存儲

Joseph Gordon-Levitt

Feb 19, 2025 am 08:47 AM

9 JavaScript Libraries for Working with Local Storage

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

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

要點

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

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 }]);
// 对象

登入後複製

其他功能包括：

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

本地存儲橋接器 (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的其他一些要點：

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

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();

登入後複製

最後，在選項對像中，您可以使用選項對象定義以下內容：

數據不同部分的命名空間
要使用的存儲方法的優先級順序
默認存儲方法
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());

// 循环遍历所有存储的值
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中幾乎所有想要做的事情，但如果您正在尋找更多內容，以下是一些您可能想要查看的更多相關工具和庫。

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

您知道其他庫嗎？

如果您在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中文網其他相關文章！

本網站聲明