快捷導(dǎo)航

分享8個(gè)JavaScript庫可更好地處理本地存儲(chǔ)

更新時(shí)間：2020年10月12日 10:50:14 作者：杭州程序員張張

這篇文章主要介紹了分享8個(gè)JavaScript庫可更好地處理本地存儲(chǔ),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

我為當(dāng)前項(xiàng)目測試了一些本地存儲(chǔ)庫。想知道他們有什么很棒的功能嗎？繼續(xù)閱讀。

Local Storage Bridge

https://github.com/krasimir/lsbridge

如果你必須在同一個(gè)瀏覽器中從一個(gè)標(biāo)簽頁發(fā)送消息到另一個(gè)標(biāo)簽頁，你不必用艱難的方式。Local storage bridge在這里讓任務(wù)變得更簡單。

基本使用：

// 發(fā)送
lsbridge.send(‘a(chǎn)pp.message.error', { error: ‘Out of memory' });

// 監(jiān)聽
lsbridge.subscribe(‘a(chǎn)pp.message.error', function(data) {
 console.log(data); // { error: ‘Out of memory' }
});

Basil.js

Basil.js統(tǒng)一了session、localStorage和cookie，為你提供了一種處理數(shù)據(jù)的直接方法。

基本使用：

let basil = new Basil(options);

basil.set(‘name', ‘Amy');
basil.get(‘name');
basil.remove(‘name');
basil.reset();

store.js

https://github.com/krasimir/lsbridge

Store.js像其他東西一樣處理數(shù)據(jù)存儲(chǔ)。但還有更多的功能，它的一個(gè)高級(jí)特性是讓你更深入地訪問瀏覽器支持。

基本使用：

store.set(‘book', { title: ‘JavaScript' }); // Store a book
store.get(‘book'); // Get stored book
store.remove(‘book'); // Remove stored book
store.clearAll(); // Clear all keys

lscache

https://github.com/pamelafox/lscache

它與localStorage API類似。事實(shí)上，它是localStorage的一個(gè)封裝器，并使用HTML5模擬memcaches函數(shù)。在上面的文檔中發(fā)現(xiàn)更多的功能。

基本使用：

lscache.set(‘name', ‘Amy', 5); // 數(shù)據(jù)將在5分鐘后過期
lscache.get(‘name');

Lockr

Lockr建立在localStorage API之上。它提供了一些有用的方法來更輕松地處理本地?cái)?shù)據(jù)。

是什么讓你要使用此庫而不是localStorage API？

好吧，localStorage API僅允許你存儲(chǔ)字符串。如果要存儲(chǔ)數(shù)字，則需要先將該數(shù)字轉(zhuǎn)換為字符串。在Lockr中不會(huì)發(fā)生這種情況，因?yàn)長ockr允許你存儲(chǔ)更多的數(shù)據(jù)類型甚至對(duì)象。

基本使用：

Lockr.set(‘name', ‘Amy');
Lockr.set(‘a(chǎn)ge', 28);
Lockr.set(‘books', [{title: ‘JavaScript', price: 11.0}, {title: ‘Python', price: 9.0}]);

Barn

github.com/arokor/barn

Barn在localStorage之上提供了一個(gè)類似Redis的API。如果持久性很重要，那么你將需要這個(gè)庫來保持?jǐn)?shù)據(jù)狀態(tài)，以防發(fā)生錯(cuò)誤。

基本使用：

let barn = new Barn(localStorage);

// 原始類型
barn.set(‘name', ‘Amy');
let name = barn.get(‘name'); // Amy

// List
barn.lpush(‘names', ‘Amy');
barn.lpush(‘names', ‘James');
let name1 = barn.rpop(‘names'); // Amy
let name2 = barn.rpop(‘names'); // James

localForage

https://github.com/localForage/localForage

這個(gè)簡單而快速的庫將通過IndexedDB或WebSQL使用異步存儲(chǔ)來改善Web的脫機(jī)體驗(yàn)。它類似于localStorage，但具有回調(diào)功能。

基本使用：

localforage.setItem(‘name', ‘Amy', function(error, value) {
 // Do something
});

localforage.getItem(‘name', function(error, value) {
 if (error) {
  console.log(‘a(chǎn)n error occurs');
 } else {
  // Do something with the value
 }
});

很神奇的是它提供中文文檔

crypt.io

https://github.com/jas-/crypt.io

crypt.io使用標(biāo)準(zhǔn)JavaScript加密庫實(shí)現(xiàn)安全的瀏覽器存儲(chǔ)。使用crypto.io時(shí)，有三個(gè)存儲(chǔ)選項(xiàng)：sessionStorage，localStorage或cookie。

基本使用：

let storage = crypto;
let book = { title: ‘JavaScript', price: 13 };

storage.set(‘book', book, function(error, results) {
 if (error) {
  throw error;
 }
 
 // Do something
});

storage.get(‘book', function(error, results) {
 if (error) {
  throw error;
 }
 // Do something
});

你還知道其他本地存儲(chǔ)庫嗎？為什么使用它？

到此這篇關(guān)于分享8個(gè)JavaScript庫可更好地處理本地存儲(chǔ) 的文章就介紹到這了,更多相關(guān)JavaScript 本地存儲(chǔ)庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: