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:

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

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:

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

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

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.

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

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:

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

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

Zus?tzlich gibt es einige fortgeschrittenere Funktionen:

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']

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:

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

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

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

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

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

// 存儲對象字面量；在后臺使用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());

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

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

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

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

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

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

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

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:

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

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

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:

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'

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

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

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:

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

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:

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

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

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

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 erm?glicht es Ihnen auch, Cookies oder SessionStorage zu verwenden:

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

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

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

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

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

// 存儲對象字面量；在后臺使用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());

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

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:

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

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

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

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

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

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!