API HTML

Il existe deux API localStorage dans le navigateur : localStorage et sessionStorage, toutes deux présentes dans l'objet window. localStorage correspond à window.localStorage, et sessionStorage correspond à window.sessionStorage.

La principale différence entre localStorage et sessionStorage est leur durée de vie.

Utilisation de base

  • Le terme iciScopefait référence à : comment isoler localStorage entre différentes pages (vous ne pouvez pas lire le localStorage de Tencent sur la page de Baidu, haha).

  • localStorageTant que le même protocole, le même nom d'hôte et le même port sont utilisés, les mêmes données localStorage peuvent être lues/modifiées.

  • sessionStorageComparerlocalStoragePlus strictement, en plus du protocole, du nom d'hôte et du port, il faut aussi être dans le mêmewindow(c'est-à-dire un onglet de navigateur).

Durée de vie

localStorageThéoriquement, il est valide de façon permanente, c'est-à-dire qu'il ne disparaîtra pas à moins d'être activement effacé. Même si les données enregistrées dépassent la taille spécifiée par le navigateur, il n'effacera pas les anciennes données mais ne fera que lever une erreur. Cependant, notez que dans les navigateurs d'appareils mobiles ou diversNative ApputiliséWebViewdans,localStorageil n'est pas fiable, et peut être effacé pour diverses raisons (comme quitter l'application, changer de réseau, mémoire insuffisante, etc.).
sessionStorageSa durée de vie, comme son nom l'indique, est similaire àsessionsession. Dès que le navigateur (y compris les onglets du navigateur) est fermé, il sera effacé. Parce quesessionStoragela durée de vie de sessionStorage est trop courte, ses scénarios d'application sont très limités. Cependant, d'un autre côté, il est moins sujet aux exceptions et relativement fiable.

Structure de données

localStorage est un type de données clé-valeur (KV) standard. Il est simple mais aussi facile à étendre. Tant que l'objet à stocker dans localStorage est converti en une chaîne de caractères selon un certain encodage, il peut être facilement pris en charge. Par exemple : convertir un objet en une chaîne JSON permet de stocker des objets ; convertir une image en DataUrl (base64) permet de stocker des images. De plus, pour les types de données clé-valeur, la caractéristique selon laquelle « les clés sont uniques » est assez importante. Si vous affectez une valeur de façon répétée avec la même clé, cela écrasera la valeur précédente.

Temps d'expiration

Malheureusement, localStorage ne prend pas nativement en charge la définition d'un temps d'expiration. Si vous souhaitez en définir un, vous devez encapsuler vous-même une couche de logique :

function set(key,value){ var curtime = new Date().getTime();//Obtenir l'heure actuelle localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//Convertir en une séquence de chaînes JSON } function get(key,exp)//exp est le temps d'expiration défini { var val = localStorage.getItem(key);//Récupérer l'élément stocké var dataobj = JSON.parse(val);//Extraire l'objet JSON if(new Date().getTime() - dataobj.time > exp)//Si le temps actuel - le temps défini lors de la création de l'élément stocké > temps d'expiration { console.log("expires");//Indiquer qu'il a expiré } else{ console.log("val="+dataobj.val); } }

Limite de capacité

Actuellement, l'industrie le fixe pratiquement à l'unanimité à 5M, ce qui est déjà bien plus grand que les 4K des cookies. Utilisez-le avec parcimonie, jeune homme.

Restriction de domaine

En raison de la politique de sécurité du navigateur, localStorage ne peut pas être interdomaine, et un sous-domaine ne peut pas hériter des données localStorage du domaine parent. Cela est assez différent des cookies.

Gestion des exceptions

localStorage n'est pas complètement stable dans l'environnement de navigateur actuel, et divers bugs peuvent survenir. La gestion des exceptions doit être considérée attentivement. Personnellement, je pense que localStorage n'est qu'une méthode d'optimisation pour la localisation des ressources. La facilité d'utilisation du programme ne doit pas être réduite à cause de l'utilisation de localStorage. Je m'oppose absolument à une gestion des exceptions qui ne fait qu'afficher quelques messages d'erreur dans la console. La gestion des exceptions pour localStorage utilise généralementtry/catchpour intercepter/gérer les exceptions.

Comment tester si le navigateur actuel de l'utilisateur prend en charge localStorage

La pratique courante actuelle consiste à vérifierwindow.localStorage, qu'il existe ou non.try/catchDans la structure,set/getun élément de données de test est utilisé pour vérifier si une exception se produit, afin de déterminer si le navigateur prend en charge localStorage. Bien sûr, n'oubliez pas de supprimer les données de test après le test.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox Internet Explorer Opera Safari Android Opera Mobile Safari Mobile
localStorage 4 3.5 8 10.50 4 2.1 11 iOS 3.2
sessionStorage 5 2 8 10.50 4 2.1 11 iOS 3.2

Comment déboguer

Dans les outils de développement Chrome,Resources - Local Storagepanneau, etResources - Session Storagedans le panneau, vous pouvez voir les données localStorage sous le domaine actuel.

Impossible d'appeler setItem() de façon répétée sur les appareils iOS

De plus, sur iPhone/iPad, une étrange erreur QUOTA_EXCEEDED_ERR se produit parfois lors de l'appel à setItem(). Dans ce cas, en général, appeler removeItem() avant setItem() résoudra le problème.

Plugins recommandés

Articles de référence

Lien d'origine : https://segmentfault.com/a/1190000004121465