9 JavaScript -Bibliotheken für die Arbeit mit lokalem Speicher

HTML5 Lokale Speicher -API (Teil des Webspeichers) bietet einen hervorragenden Browser -Support und wird in immer mehr Anwendungen angewendet. Es hat eine einfache API, aber auch einige Nachteile, die Keksen ähneln.

Ich habe im vergangenen Jahr einige Tools und Bibliotheken mit der LocalStorage -API mit einigen Code -Beispielen und Feature -Diskussionen in diesen Beitrag aufgenommen.

Schlüsselpunkte

• HTML5 Lokale Speicher -API wird weithin unterstützt und wird in Anwendungen immer häufiger, aber auch einige Einschränkungen wie Cookies. Es wurden verschiedene JavaScript -Bibliotheken entwickelt, um ihre Fähigkeiten zu verbessern und zu erweitern.
• lockr, store.js und lScache bieten Wrapper für die LocalStorage -API und bieten zusätzliche Verwendungsmethoden und -funktionen. Dazu gehören das Speichern verschiedener Datentypen ohne manuelle Konvertierung, tiefere Browserunterstützung und Simulation des Memcached -Speicherobjekt -Caching -Systems.
• Secstore.js und LocalFirage bieten professionelle Funktionen. Secstore.js fügt durch die Stanford JavaScript Crypto Library eine Sicherheitsebene hinzu, während die von Mozilla erstellte LocalForage eine asynchrone Speicher -API mit IndexedDB oder Websql bietet.
• Andere Bibliotheken wie Basilil.js und Lz-String bieten einzigartige Funktionen. Basil.js ist ein einheitlicher Lokalstor-, SessionStorage- und Cookie -API, mit dem Sie Namespaces, Speichermethodenprioritäten und Standardspeicher definieren können. Die LZ-String ermöglicht die Speicherung großer Datenmengen in Lokalstorage durch Komprimierung.

lockr

lockr ist ein Wrapper für die LocalStorage -API, mit der Sie viele nützliche Methoden und Funktionen verwenden können. Während LocalStorage beispielsweise auf das Speichern von Zeichenfolgen beschränkt ist, können Sie mit Lockr verschiedene Datentypen speichern, ohne sie selbst konvertieren zu müssen:

<code class="language-javascript">Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象</code>

Andere Funktionen umfassen:

• Verwenden Sie die Methode lockr.get (), um alle Schlüsselwertpaare zu rufen
• kompilieren Sie alle Schlüsselwertpaare mit der Methode LockR.getall ()
in ein Array in ein Array
• Verwenden Sie die Methode lockr.flush (), um alle gespeicherten Schlüsselwertpaare zu löschen
• Werte unter Hash -Taste mit Lockr.sadd und lockr.srem
hinzufügen/entfernen

Die lokale Speicherbrücke

Eine 1 -KB -Bibliothek für die Verwendung von LocalStorage als Kommunikationskanal, um den Nachrichtenaustausch zwischen Registerkarten im selben Browser zu erleichtern. Sobald die Bibliothek enthalten ist, können Sie hier den Beispielcode verwenden, den Sie verwenden können:

<code class="language-javascript">// 发送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});</code>

Wie gezeigt, erstellt und sendet die Send () -Methode Nachrichten, und die Methode von SendScribe () ermöglicht es Ihnen, auf bestimmte Nachrichten anzuhören. In diesem Blog -Beitrag können Sie mehr über die Bibliothek lesen.

Scheune

Diese Bibliothek bietet eine Redis-ähnliche API, die eine "schnelle, atomisierte persistente Speicherschicht" über Lokalstorage bietet. Unten finden Sie ein Beispielcode -Ausschnitt aus dem Readme des Repo. Es zeigt viele verfügbare Methoden.

<code class="language-javascript">Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象</code>

Weitere Merkmale der

-API sind die Möglichkeit, die Start-/Endwerte zu verwenden, um Bereiche zu erhalten, Elemente -Arrays zu erhalten und den gesamten Datenspeicher zu komprimieren, um Speicherplatz zu sparen. Dieses Repo enthält einen vollständigen Verweis auf alle Methoden und ihre Funktionen.

store.js

Dies ist ein weiterer Wrapper, der LockR ähnelt, aber diesmal bietet es eine tiefere Browserunterstützung durch Fallback. Readme erklärt: "Store.js verwendet LocalStorage, wenn verfügbar und fällt auf das Verhalten von UserData in IE6 und IE7 zurück. Es gibt keinen Blitz, um die Seite zu verlangsamen. Es gibt kein Cookie, um die Belastung für Netzwerkanfragen zu erhöhen."

Die grundlegende API wird in den Kommentaren im folgenden Code erklärt:

<code class="language-javascript">// 发送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});</code>

Zusätzlich gibt es einige fortgeschrittenere Funktionen:

<code class="language-javascript">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']</code>

ReadMe on Github Repo beschreibt die Tiefe der Browserunterstützung sowie potenzielle Fehler und Fallstricke (z. B. erlauben einige Browser keinen lokalen Speicher im Datenschutzmodus).

lScache

lScache ist ein weiterer Lokalstor -Wrapper, aber mit einigen zusätzlichen Funktionen. Sie können es als einfache Lokalstorage -API verwenden oder die Funktionalität des emulierenden Memcached (Speicherobjekt -Caching -System) verwenden.

lScache enthält die folgende Methode, die in den Kommentaren im Code beschrieben wird:

<code class="language-javascript">// 在'website'中存储'SitePoint'
store.set('website', 'SitePoint');

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

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

// 清除所有键
store.clear();</code>

Wie in der vorherigen Bibliothek kümmert sich diese Bibliothek ebenfalls mit der Serialisierung, sodass Sie Objekte speichern und abrufen können:

<code class="language-javascript">// 存储对象字面量；在后台使用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);
});</code>

Schließlich ermöglicht LSCache, Daten in "Eimer" zu unterteilen. Schauen Sie sich diesen Code an:

<code class="language-javascript">// 设置一个带有2分钟过期时间的问候语
lscache.set('greeting', 'Hello World!', 2);

// 获取并显示问候语
console.log(lscache.get('greeting'));

// 删除问候语
lscache.remove('greeting');

// 刷新整个缓存项目
lscache.flush();

// 只刷新过期的项目
lscache.flushExpired();</code>

Beachten Sie, dass das Ergebnis im zweiten Protokoll null ist. Dies liegt daran, dass ich einen benutzerdefinierten Eimer eingerichtet habe, bevor ich das Ergebnis protokte. Sobald ich einen Eimer eingerichtet habe, ist nichts zu LSCache hinzugefügt, bevor dies unzugänglich ist, auch wenn ich versuche, ihn zu aktualisieren. Nur Artikel im "anderen" Eimer sind zugänglich oder erfrischbar. Als ich dann den Eimer zurücksetzte, konnte ich wieder auf meine Originaldaten zugreifen.

Secstore.js

Secstore.js ist eine Datenspeicher -API, die eine optionale Sicherheitsebene durch die Stanford JavaScript Crypto Library hinzufügt. Mit Secstore.js können Sie Speichermethoden auswählen: LocalStorage, SessionStorage oder Cookie. Um Secstore.js zu verwenden, müssen Sie auch die zuvor erwähnte SJCL.JS -Bibliothek einbeziehen.

Folgendes ist ein Beispiel, das zeigt, wie einige Daten mit der Option "Verschlüsseln" auf "true" eingestellt werden können:

<code class="language-javascript">lscache.set('website', {
  'name': 'SitePoint',
  'category': 'CSS'
}, 4);

// 从对象中检索数据
console.log(lscache.get('website').name);
console.log(lscache.get('website').category);</code>

Beachten Sie die verwendete Methode set (), die die von Ihnen angegebenen Optionen (einschließlich benutzerdefinierter Daten) und eine Rückruffunktion übergibt, mit der Sie die Ergebnisse testen können. Anschließend können wir die Get () -Methode verwenden, um die Daten abzurufen:

<code class="language-javascript">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'</code>

Wenn Sie SessionStorage oder Cookies anstelle von LocalStorage in Secstore.js verwenden möchten, können Sie es in den Optionen definieren:

<code class="language-javascript">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);
});</code>

LOCALFURAGE

Diese von Mozilla erstellte Bibliothek bietet Ihnen eine einfache lokalstor-ähnliche API, verwendet jedoch einen asynchronen Speicher über indexedDB oder Websql. Die API ist genau das gleiche wie LocalStorage (getItem (), setItem () usw.), außer dass die API asynchron ist und die Syntax die Verwendung von Rückernrufen erfordert.

Zum Beispiel erhalten Sie den Rückgabewert nicht, unabhängig davon, ob Sie den Wert festlegen oder erhalten, aber Sie können die an die Rückruffunktion übergebenen Daten verarbeiten und (optional) den Fehler verwandeln:

<code class="language-javascript">Lockr.set('website', 'SitePoint'); // 字符串
Lockr.set('categories', 8); // 数字
Lockr.set('users', [{ name: 'John Doe', age: 18 }, { name: 'Jane Doe', age: 19 }]);
// 对象</code>

Einige andere Punkte über die lokale Vermittlung:

• Unterstützung JavaScript Promise
• Wie andere Bibliotheken beschränkt sich nicht nur auf das Speichern von Zeichenfolgen, sondern auch auf das Einstellen und Erhalten von Objekten
Mit
• können Sie Datenbankinformationen mithilfe der config () -Methode
festlegen

basil.js

basil.js wird als einheitliche Lokalstor-, SessionStorage- und Cookie -API beschrieben, die einige einzigartige und sehr einfach zu verwendende Funktionen enthält. Die grundlegende Methode kann wie folgt verwendet werden:

<code class="language-javascript">// 发送消息
lsbridge.send('my-namespace', { 
  message: 'Hello world!' 
});

// 监听消息
lsbridge.subscribe('my-namespace', function(data) {
  console.log(data); // 打印：'Hello world!'
});</code>

Sie können auch Basil.js verwenden, um zu testen, ob lokalstorage verfügbar ist:

<code class="language-javascript">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']</code>

basil.js ermöglicht es Ihnen auch, Cookies oder SessionStorage zu verwenden:

<code class="language-javascript">// 在'website'中存储'SitePoint'
store.set('website', 'SitePoint');

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

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

// 清除所有键
store.clear();</code>

Schließlich können Sie im Optionsobjekt das Optionsobjekt verwenden, um Folgendes zu definieren:

• Namespaces für verschiedene Teile der Daten
• bevorzugte Reihenfolge der Speichermethoden, die verwendet werden können
• Standardspeichermethode
• Ablaufdatum von Cookies

<code class="language-javascript">// 存储对象字面量；在后台使用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);
});</code>

lz-String

Mit

Lz-String-Dienstprogramm können Sie große Datenmengen in LocalStorage durch Komprimierung speichern, und es ist sehr einfach zu bedienen. Nachdem Sie die Bibliothek auf die Seite aufgenommen haben, können Sie Folgendes ausführen:

<code class="language-javascript">// 设置一个带有2分钟过期时间的问候语
lscache.set('greeting', 'Hello World!', 2);

// 获取并显示问候语
console.log(lscache.get('greeting'));

// 删除问候语
lscache.remove('greeting');

// 刷新整个缓存项目
lscache.flush();

// 只刷新过期的项目
lscache.flushExpired();</code>

Bitte achten Sie auf die Verwendung von compress () und decompress () -Methoden. Die Kommentare im obigen Code zeigen die Längenwerte vor und nach der Komprimierung. Sie können sehen, wie vorteilhaft dies sein wird, da der Client -Speicher im Raum immer begrenzt ist.

Wie in der Bibliotheksdokumentation erläutert, können Sie die Daten in uint8Array (einen neueren Datentyp in JavaScript) komprimieren und sogar die Daten komprimieren, um extern auf dem Client zu speichern.

ehrenwerte Erwähnungen

Die oben genannten Tools können Ihnen helfen, fast alles zu tun, was Sie in LocalStorage tun möchten. Wenn Sie jedoch nach mehr suchen, finden Sie hier einige mehr verwandte Tools und Bibliotheken, die Sie möglicherweise überprüfen möchten.

• lokijs-Ein schneller, dokumentorientierter Datenspeicher für Node.js, Browser und Cordova.
• AngularJS Client Speicher - Angular JS Namespace Client -Speicher. Schreiben Sie an LocalStorage und fallen Sie zurück zum Cookie. Es gibt keine externen Abhängigkeiten außer dem Winkelkern;
• alasql.js - JavaScript SQL -Datenbank und Node.js für Browser. Behandeln Sie traditionelle zugehörige Tabellen und verschachtelte JSON -Daten (NoSQL). Export-, Speichern und Importieren von Daten von LocalStorage, IndexedDB oder Excel.
• Angular-Locker-Einfache und konfigurierbare Abstraktion der Lokal-/Sitzungsspeicherung in Winkelprojekten, die eine leistungsstarke und benutzerfreundliche reibungslose API bietet.
• JSCache - Aktivieren Sie den Cache von JavaScript -Dateien, CSS -Stylesheets und Bildern unter Verwendung von LocalStorage.
• largelocalstorage-überwinden Sie verschiedene Browserfehler und bieten einen großen Schlüsselwertspeicher auf der Client-Seite.

Kennen Sie andere Bibliotheken?

Wenn Sie einige Tools erstellt haben, um den Kundenspeicher zusätzlich zu der LocalStorage -API oder verwandten Tools zu verbessern, können Sie uns in den Kommentaren informieren.

(Der Rest des Artikels ist FAQ, das gemäß dem Originaltext neu geschrieben und optimiert wurde, und die ursprüngliche Absicht wird beibehalten)

Häufig gestellte Fragen zu JavaScript -lokalen Repositories (FAQ)

F: Was sind die Vorteile der Verwendung von JavaScript -lokalen Repositories?

a: JavaScript Local Repository bietet viele Vorteile. Sie bieten eine effizientere Möglichkeit, Daten auf der Client -Seite zu speichern, was die Leistung von Webanwendungen erheblich verbessern kann. Diese Bibliotheken bieten auch ein höheres Sicherheitsniveau als herkömmliche Datenspeichermethoden, da sie die Datenverschlüsselung ermöglichen. Darüber hinaus bieten sie eine benutzerfreundlichere Oberfläche für das Datenmanagement, sodass Entwickler den lokalen Speicher einfacher werden können.

F: Wie funktioniert lokaler Speicher in JavaScript?

a: Lokaler Speicher in JavaScript ermöglicht Webanwendungen, Daten in einem Webbrowser zu speichern. Im Gegensatz zu Cookies läuft der lokale Speicher nicht ab und wird nicht an den Server zurückgeschickt, was ihn zu einer effizienteren Methode für die Datenspeicherung macht. Daten, die im lokalen Speicher gespeichert sind, werden in Browser -Sitzungen gespeichert, sodass sie auch dann verfügbar sind, auch wenn der Browser geschlossen und wiedereröffnet wird.

F: Kann ich den lokalen Speicher für sensible Daten verwenden?

a: Während lokaler Speicher eine bequeme Möglichkeit zum Speichern von Daten über den Client bietet, wird nicht empfohlen, diese zum Speichern sensibler Daten zu verwenden. Dies liegt daran, dass lokaler Speicher nicht als sicherer Speichermechanismus ausgelegt ist. Daten, die im lokalen Speicher gespeichert sind, können einfach mit dem einfachen JavaScript -Code zugegriffen und manipuliert werden. Daher sollten sensible Daten wie Passwörter, Kreditkartennummern oder persönliche Benutzerinformationen nicht im lokalen Speicher gespeichert werden.

F: Wie verwaltet ich Daten im lokalen Speicher?

a: Verwalten von Daten im lokalen Speicher beinhaltet drei Hauptaktionen: Einrichten von Elementen, Abrufen von Elementen und Löschen von Elementen. Um das Projekt festzulegen, können Sie die SetItem () -Methode verwenden, die zwei Parameter akzeptiert: Schlüssel und Wert. Um ein Element abzurufen, können Sie die GetItem () -Methode verwenden, die den Schlüssel als Argument akzeptiert und den entsprechenden Wert zurückgibt. Um ein Element zu löschen, können Sie die Methode von REMETItem () verwenden, die einen Schlüssel als Argument akzeptiert.

F: Was sind einige beliebte lokale JavaScript -Repositories?

a: Es gibt mehrere beliebte lokale Repositories für JavaScript, einschließlich Store.js, LocalForage und JS-Cookie. Store.js bietet eine einfache und konsistente API für lokale Speicherung und läuft auf allen großen Browsern. LocalForage bietet eine leistungsstarke asynchrone Speicher -API und unterstützt IndexedDB, Websql und LocalStorage. JS-Cookie ist eine leichte Bibliothek für die Behandlung von Cookies, die als Fallback verwendet werden können, wenn der lokale Speicher nicht verfügbar ist.

F: Wie überprüfen Sie, ob lokaler Speicher verfügbar ist?

a: Sie können den einfachen Try/Catch -Block in JavaScript verwenden, um zu überprüfen, ob der lokale Speicher verfügbar ist. Die Eigenschaft window.localStorage kann zum Zugriff auf lokale Speicherobjekte verwendet werden. Lokaler Speicher ist verfügbar, wenn diese Eigenschaft vorliegt und zum Einrichten und Abrufen von Elementen verwendet werden kann.

F: Was ist das Speicherlimit für den lokalen Speicher?

a: Die Speichergrenzen für den lokalen Speicher variieren vom Browser zu Browser, liegen jedoch normalerweise bei 5 MB. Dies ist viel größer als die Speichergrenze von Cookies (nur 4 KB). Es ist jedoch besser, sich der Menge an Daten zu bewusst, die Sie in Ihrem lokalen Speicher speichern, da zu viele Daten Ihre Webanwendungen verlangsamen können.

F: Kann lokaler Speicher zwischen verschiedenen Browsern geteilt werden?

a: Nein, lokaler Speicher kann nicht zwischen verschiedenen Browsern geteilt werden. Jeder Webbrowser verfügt über einen eigenen unabhängigen lokalen Speicher, sodass die in einem Browser gespeicherten Daten in einem anderen nicht verfügbar sind. Dies ist wichtig, wenn Sie Webanwendungen entwerfen, die auf lokalem Speicher beruhen.

F: Wie lösche ich alle Daten im lokalen Speicher?

a: Mit der Methode Clear () können Sie alle Daten im lokalen Speicher löschen. Diese Methode akzeptiert keine Parameter und löscht alle Elemente aus dem lokalen Speicher. Seien Sie vorsichtig, wenn Sie diese Methode verwenden, da sie alle Daten im lokalen Speicher dauerhaft löscht.

F: Kann lokaler Speicher auf mobilen Geräten verwendet werden?

a: Ja, lokaler Speicher kann auf mobilen Geräten verwendet werden. Die meisten modernen mobilen Webbrowser unterstützen den lokalen Speicher, sodass Sie ihn auf Desktop- und Mobilgeräten verwenden können, um Daten zu speichern. Speicherbeschränkungen für mobile Geräte sind jedoch möglicherweise gering. Daher ist es wichtig, dies beim Entwerfen von Webanwendungen zu berücksichtigen.

Das obige ist der detaillierte Inhalt von9 JavaScript -Bibliotheken für die Arbeit mit lokalem Speicher. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!