Parlez des compétences du tutoriel HTML5 sur la technologie de stockage local_html5

La mise en cache locale est une nouvelle technologie apparue avec HTML5. L'émergence de cette technologie rend possible le développement du Web mobile. Nous savons tous que lorsqu’il s’agit de créer une application mobile hautes performances, la vitesse est la clé. Avant HTML5, seuls les cookies pouvaient stocker des données et leur taille n'était que de 4 Ko. Cela limite considérablement le stockage des fichiers d'application, ce qui entraîne de longs temps de chargement pour les applications mobiles développées sur le Web. Avec le stockage local, les applications Web mobiles peuvent être plus proches du natif.

Dans le navigateur, le stockage local est appelé via window.localStorage. Le code permettant de déterminer si le navigateur prend en charge le stockage local est le suivant :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. if(window.localStorage){
2. alert('Ce navigateur prend en charge localStorage');
3. }autre{
4. alert('Ce navigateur ne prend PAS en charge le stockage local');
5. } 

Si nous voulons stocker des données localement, le moyen le plus simple est de fenêtrer. Ajoutez une propriété à localStorage et attribuez-lui une valeur. Par exemple, si nous voulons stocker un nom de donnée dont la valeur est Tom, nous pouvons y parvenir de la manière suivante :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. window.localStorage.name = « Tom »

Notez ici que les variables de chaîne nécessitent des guillemets. Lorsque nous souhaitons récupérer les données du stockage local, nous pouvons utiliser la méthode getItem. L'ensemble du processus de code est le suivant :

Code JavaScriptCopier le contenu dans le presse-papiers

1. var storage = window.localStorage;
2. storage.name = « Tom »
3. //Obtenir les données de nom
4. var name1 = storage.getItem("nom");
5. alerte(nom1);

Le résultat de l'affichage de ce code dans la console du navigateur Chrome est une boîte de dialogue affichant Tom. On peut voir que nous avons correctement stocké et lu les données de cette manière.

Si nous voulons supprimer ces données stockées, nous pouvons utiliser la méthode removeItem. Ajoutez le code suivant au code ci-dessus :

Code JavaScriptCopier le contenu dans le presse-papiers

1. storage.removeItem("nom");

À ce moment-là, lorsque nous alerterons à nouveau, null sera affiché car les données ont été effacées.

Après avoir compris quelques idées et utilisations de base du stockage local, introduisons systématiquement le stockage local.

Le stockage local est divisé en trois grandes catégories : localStorage/sessionStorage/local database

L'utilisation, les fonctions, les méthodes d'appel, etc. de localStorage et sessionStorage sont les mêmes. Ils ont seulement des significations différentes. Parmi eux, les données stockées dans localStorage sont valables longtemps, tandis que les informations stockées dans sessionStorage seront détruites à la fermeture de chaque session (en termes simples, les données sont automatiquement détruites après la fermeture de la page).

En raison des caractéristiques différentes des deux, les scénarios d'application sont également très différents. Habituellement, lorsque nous devons stocker certains éléments de configuration utilisateur et d'autres informations de données qui doivent être stockées pendant une longue période, nous devons utiliser localStorgae pour les sauvegarder, en profitant de ses caractéristiques durables. En conséquence, lorsque nous devons implémenter des fonctions basées sur des sessions telles que des paniers d'achat, nous devons utiliser sessionStorage.

Étant donné que l'utilisation de localStorage et de sessionStorage est la même, nous prenons localStorage comme exemple pour présenter les méthodes des deux.

1. Définir les données setItem
L'utilisation est localStorage.setItem("key", "value"), ce qui signifie transmettre la valeur à la clé. (La méthode d'utilisation de sessionStorage.setItem est la même et ne sera pas présentée une par une ci-dessous)

2. Obtenir des données getItem
L'utilisation est localStorage.getItem("key") Tant que vous entrez la valeur de clé correspondante, vous pouvez en obtenir la valeur correspondante.

3. Supprimer des données spécifiques RemoveItem
L'utilisation est localStorage.removeItem(key) pour supprimer les données correspondant à la clé.

4. Effacer toutes les données. L'utilisation de clear
est localStorage.clear(), ce qui signifie effacer toutes les données du système de stockage.

Ce qui précède présente quelques-unes des utilisations les plus élémentaires de sessionStorage/localStorage, j'espère que cela sera utile à l'apprentissage de chacun.