9 bibliothèques JavaScript pour travailler avec le stockage local

L'API de stockage local HTML5 (partie du stockage Web) a une excellente prise en charge du navigateur et est appliquée dans de plus en plus d'applications. Il a une API simple, mais il présente également des inconvénients similaires aux cookies.

J'ai rencontré pas mal d'outils et de bibliothèques en utilisant l'API LocalStorage au cours de la dernière année, donc je les ai triés dans ce post avec quelques exemples de code et des discussions de fonctionnalités.

Points clés

• L'API de stockage local HTML5 est largement prise en charge et devient de plus en plus fréquente dans les applications, mais il a également certaines limites similaires aux cookies. Diverses bibliothèques JavaScript ont été développées pour améliorer et étendre leurs capacités.
• Lockr, Store.js et Lscache fournissent des emballages pour l'API localStorage, fournissant des méthodes et fonctions d'utilisation supplémentaires. Il s'agit notamment du stockage de différents types de données sans conversion manuelle, de la prise en charge plus profonde du navigateur et de la simulation du système de mise en cache d'objet de mémoire Memcached.
• secstore.js et localforage offrent plus de fonctionnalités professionnelles. SecStore.js ajoute une couche de sécurité via la bibliothèque Crypto JavaScript de Stanford, tandis que LocalForage construit par Mozilla fournit une API de stockage asynchrone à l'aide d'indexedDB ou de WebSQL.
• D'autres bibliothèques telles que Basil.js et LZ-String offrent des fonctionnalités uniques. Basil.js est une API localstorage, sessionstorage et cookie unifiée qui vous permet de définir des espaces de noms, des priorités de méthode de stockage et un stockage par défaut. LZ-String permet le stockage de grandes quantités de données dans LocalStorage via la compression.

Lockr

Lockr est un emballage pour l'API localStorage qui vous permet d'utiliser de nombreuses méthodes et fonctionnalités utiles. Par exemple, bien que LocalStorage se limite au stockage des chaînes, Lockr vous permet de stocker différents types de données sans avoir à les convertir vous-même:

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

Les autres fonctions incluent:

• Utilisez la méthode Lockr.get () pour récupérer toutes les paires de valeurs de clé
• Compiler toutes les paires de valeurs de clé dans un tableau à l'aide de la méthode Lockr.getall ()
• Utilisez la méthode Lockr.Flush () pour supprimer toutes les paires de valeurs de clé stockées
• Ajouter / supprimer des valeurs sous la touche de hachage à l'aide de Lockr.Sadd et Lockr.Srem

Le pont de stockage local

Une bibliothèque 1KB pour l'utilisation de LocalStorage comme canal de communication pour faciliter l'échange de messages entre les onglets du même navigateur. Une fois la bibliothèque incluse, voici l'exemple de code que vous pouvez utiliser:

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

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

Comme indiqué, la méthode Send () crée et envoie des messages, et la méthode abons () vous permet d'écouter des messages spécifiés. Vous pouvez en savoir plus sur la bibliothèque de cet article de blog.

grange

Cette bibliothèque fournit une API de type Redis qui fournit une "couche de stockage persistante rapide et atomisée" sur LocalStorage. Vous trouverez ci-dessous un exemple d'extrait de code tiré de la lecture du dépôt. Il démontre de nombreuses méthodes disponibles.

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

Les autres fonctionnalités de l'API

incluent la possibilité d'utiliser les valeurs de démarrage / fin pour obtenir des gammes, d'obtenir des tableaux d'articles et de compresser l'intégralité du magasin de données pour économiser de l'espace. Ce repo contient une référence complète à toutes les méthodes et à leurs fonctions.

store.js

Il s'agit d'un autre wrapper similaire à Lockr, mais cette fois, il fournit un support de navigateur plus profond via Fallback. ReadMe explique: "Store.js utilise LocalStorage lorsqu'il est disponible et retombe au comportement UserData dans IE6 et IE7. Il n'y a pas de flash pour ralentir le chargement de la page. Il n'y a pas de cookie pour augmenter la charge des demandes de réseau."

L'API de base est expliquée dans les commentaires du code suivant:

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

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

De plus, il existe des fonctionnalités plus avancées:

<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 sur GitHub Repo Détails La profondeur de la prise en charge du navigateur et des bogues et des pièges potentiels à considérer (par exemple, certains navigateurs n'autorisent pas le stockage local en mode confidentialité).

lscache

Lscache est un autre wrapper localStorage, mais avec quelques fonctionnalités supplémentaires. Vous pouvez l'utiliser comme une simple API LocalStorage ou utiliser la fonctionnalité de l'émulation Memcached (Système de mise en cache d'objet Memory).

LSCACHE expose la méthode suivante, qui est décrite dans les commentaires du code:

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

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

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

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

Comme la bibliothèque précédente, cette bibliothèque gère également la sérialisation, afin que vous puissiez stocker et récupérer des objets:

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

Enfin, Lscache vous permet de diviser les données en "seaux". Consultez ce code:

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

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

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

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

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

Notez que dans le deuxième journal, le résultat est nul. En effet, j'ai configuré un godet personnalisé avant de journaliser le résultat. Une fois que j'ai configuré un seau, rien n'a ajouté à Lscache avant que ce soit inaccessible, même si j'essaie de le rafraîchir. Seuls les articles du seau "Autre" sont accessibles ou rafraîchis. Ensuite, lorsque je réinitialise le seau, j'ai pu accéder à nouveau à mes données d'origine.

secstore.js

SecStore.js est une API de stockage de données qui ajoute une couche de sécurité facultative via la bibliothèque Crypto JavaScript de Stanford. secStore.js vous permet de sélectionner des méthodes de stockage: LocalStorage, SessionStorage ou cookie. Pour utiliser SecStore.js, vous devez également inclure la bibliothèque SJCL.JS mentionnée précédemment.

Ce qui suit est un exemple montrant comment enregistrer certaines données avec l'option Ecrypt définie sur "true":

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

Notez la méthode set () utilisée, qui passe dans les options que vous avez spécifiées (y compris les données personnalisées) et une fonction de rappel qui vous permet de tester les résultats. Ensuite, nous pouvons utiliser la méthode get () pour récupérer les données:

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

Si vous souhaitez utiliser SessionStorage ou des cookies au lieu de LocalStorage dans SecStore.js, vous pouvez le définir dans les options:

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

localforage

Cette bibliothèque construite par Mozilla vous fournit une simple API de type localstorage, mais utilise un stockage asynchrone via indedDB ou WebSQL. L'API est exactement la même que localStorage (getItem (), setItem (), etc.), sauf que son API est asynchrone et que la syntaxe nécessite l'utilisation de rappels.

Ainsi, par exemple, vous n'obtiendrez pas la valeur de retour, que vous définissiez ou obtenez la valeur, mais vous pouvez gérer les données transmises à la fonction de rappel et gérer (facultatif) l'erreur:

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

Quelques autres points sur la forage local:

• Soutenir JavaScript Promise
• comme les autres bibliothèques, il ne se limite pas seulement au stockage des chaînes, mais aussi à définir et à obtenir des objets
• vous permet de définir des informations sur la base de données à l'aide de la méthode config ()

Basil.js

Basil.js est décrit comme une API localstorage, sessionstorage et cookie unifiée, qui contient des fonctionnalités uniques et très faciles à utiliser. La méthode de base peut être utilisée comme suit:

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

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

Vous pouvez également utiliser Basil.js pour tester si LocalStorage est disponible:

<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 vous permet également d'utiliser des cookies ou des sessionstorage:

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

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

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

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

Enfin, dans l'objet d'option, vous pouvez utiliser l'objet Option pour définir ce qui suit:

• Espaces de noms pour différentes parties des données
• Ordre préférentiel des méthodes de stockage à utiliser
• Méthode de stockage par défaut
• Date d'expiration des 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

LZ-String Utility vous permet de stocker de grandes quantités de données dans LocalStorage en utilisant la compression, et il est très facile à utiliser. Après avoir inclus la bibliothèque sur la page, vous pouvez effectuer ce qui suit:

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

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

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

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

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

Veuillez faire attention à l'utilisation des méthodes compress () et decompress (). Les commentaires dans le code ci-dessus montrent les valeurs de longueur avant et après la compression. Vous pouvez voir à quel point ce sera bénéfique, car le stockage du client est toujours limité dans l'espace.

Comme expliqué dans la documentation de la bibliothèque, vous pouvez choisir de compresser les données dans UInt8Array (un type de données plus récent en JavaScript) et même de compresser les données pour stocker en externe sur le client.

Mentions honorables

Les outils ci-dessus peuvent vous aider à faire presque tout ce que vous voulez faire dans LocalStorage, mais si vous cherchez plus, voici quelques outils et bibliothèques plus connexes que vous voudrez peut-être consulter.

• LOKIJS - Un magasin de données rapide et axé sur le document pour Node.js, les navigateurs et Cordova.
• Stockage du client AngularJS - Stockage du client d'espace de noms Angular JS. Écrivez à Localstorage et retombez à Cookie. Il n'y a pas de dépendances externes à l'exception du noyau angulaire;
• Alasql.js - base de données JavaScript SQL et node.js pour les navigateurs. Gérer les tables associées traditionnelles et les données JSON imbriquées (NOSQL). Exporter, stocker et importer des données de LocalStorage, IndededDB ou Excel.
• Angular Locker - Abstraction simple et configurable du stockage local / session dans les projets angulaires, offrant une API lisse puissante et facile à utiliser.
• jscache - Activer le cache des fichiers JavaScript, des feuilles de styles CSS et des images à l'aide de localStorage.
• Largelocalstorage - surmontez divers défauts de navigateur et fournissez un grand stockage de valeurs clés du côté du client.

Connaissez-vous d'autres bibliothèques?

Si vous avez construit des outils pour améliorer le stockage des clients en plus de l'API LocalStorage ou des outils connexes, n'hésitez pas à nous le faire savoir dans les commentaires.

(Le reste de l'article est la FAQ, qui a été réécrit et rationalisé selon le texte d'origine, et l'intention d'origine est maintenue)

Des questions fréquemment posées sur les référentiels locaux JavaScript (FAQ)

Q: Quels sont les avantages de l'utilisation des référentiels locaux JavaScript?

A: JavaScript Le référentiel local offre de nombreux avantages. Ils fournissent un moyen plus efficace de stocker des données du côté client, ce qui peut améliorer considérablement les performances des applications Web. Ces bibliothèques offrent également un niveau de sécurité plus élevé que les méthodes de stockage traditionnelles de données, car elles permettent le cryptage des données. De plus, ils fournissent une interface plus conviviale pour la gestion des données, ce qui permet aux développeurs d'utiliser plus facilement le stockage local.

Q: Comment fonctionne le stockage local en JavaScript?

a: Le stockage local en JavaScript permet aux applications Web de persister dans le stockage des données dans un navigateur Web. Contrairement aux cookies, le stockage local n'expire pas et n'est pas renvoyé au serveur, ce qui en fait une méthode de stockage de données plus efficace. Les données stockées dans le stockage local sont enregistrées sur les séances du navigateur, ce qui signifie qu'elle est toujours disponible même si le navigateur est fermé et rouvert.

Q: Puis-je utiliser le stockage local pour des données sensibles?

a: Bien que le stockage local offre un moyen pratique de stocker des données sur le client, il n'est pas recommandé de les utiliser pour stocker des données sensibles. En effet, le stockage local n'est pas conçu comme un mécanisme de stockage sécurisé. Les données stockées dans le stockage local peuvent être facilement accessibles et manipulées à l'aide du code JavaScript simple. Par conséquent, les données sensibles telles que les mots de passe, les numéros de carte de crédit ou les informations personnelles ne doivent pas être stockées dans le stockage local.

Q: Comment gérer les données dans le stockage local?

a: Gestion des données dans le stockage local implique trois actions principales: la configuration des éléments, l'obtention d'éléments et la suppression des éléments. Pour définir le projet, vous pouvez utiliser la méthode setItem (), qui accepte deux paramètres: clé et valeur. Pour récupérer un élément, vous pouvez utiliser la méthode getItem (), qui accepte la clé comme argument et renvoie la valeur correspondante. Pour supprimer un élément, vous pouvez utiliser la méthode devayItem (), qui accepte une clé comme argument.

Q: Quels sont les référentiels JavaScript locaux populaires?

a: Il existe plusieurs référentiels locaux populaires pour JavaScript, y compris Store.js, LocalForage et JS-Cookie. Store.js fournit une API simple et cohérente pour le stockage local et fonctionne sur tous les principaux navigateurs. LocalForage fournit une puissante API de stockage asynchrone et prend en charge IndededDB, WebSQL et LocalStorage. JS-Cookie est une bibliothèque légère pour gérer les cookies qui peuvent être utilisés comme une seltime lorsque le stockage local n'est pas disponible.

Q: Comment vérifier si le stockage local est disponible?

a: Vous pouvez utiliser le bloc d'essai / capture simple en JavaScript pour vérifier si le stockage local est disponible. La propriété Window.Localstorage peut être utilisée pour accéder aux objets de stockage locaux. Le stockage local est disponible si cette propriété existe et peut être utilisée pour configurer et récupérer des articles.

Q: Quelle est la limite de stockage pour le stockage local?

a: Les limites de stockage pour le stockage local varient d'un navigateur à l'autre, mais sont généralement d'environ 5 Mo. Ceci est beaucoup plus grand que la limite de stockage des cookies (seulement 4 Ko). Cependant, il vaut mieux être conscient de la quantité de données que vous stockez dans votre stockage local, car trop de données peuvent ralentir vos applications Web.

Q: Le stockage local peut-il être partagé entre différents navigateurs?

a: Non, le stockage local ne peut pas être partagé entre différents navigateurs. Chaque navigateur Web a son propre stockage local indépendant, de sorte que les données stockées dans un navigateur ne seront pas disponibles dans un autre. Ceci est important lors de la conception d'applications Web qui reposent sur le stockage local.

Q: Comment effacer toutes les données dans le stockage local?

a: Vous pouvez utiliser la méthode Clear () pour effacer toutes les données du stockage local. Cette méthode n'accepte aucun paramètre et supprimera tous les éléments du stockage local. Soyez prudent lorsque vous utilisez cette méthode, car elle supprime en permanence toutes les données du stockage local.

Q: Le stockage local peut-il être utilisé sur les appareils mobiles?

a: Oui, le stockage local peut être utilisé sur les appareils mobiles. La plupart des navigateurs Web mobiles modernes prennent en charge le stockage local, vous pouvez donc l'utiliser sur des appareils de bureau et mobiles pour stocker des données. Cependant, les limitations de stockage sur les appareils mobiles peuvent être faibles, il est donc important de considérer cela lors de la conception d'applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!