Tutoriel de démarrage de Html5 localStorage

localStorage en lecture seule vous permet d'accéder au stockage d'objets distant (d'origine) d'un document ; les données sont stockées sous forme de session multi-navigateur. localStorage est similaire à sessionStorage, la différence est que les données stockées dans localStorage sont indéfinies, tandis que les données stockées dans sessionStorage seront effacées à la fin de la session de la page, c'est-à-dire lorsque la page est fermée.

Nombre de paires clé-valeur dans localStorage.

 localStorage.length // 0localStorage.setItem('name', 'mazey')localStorage.length // 1

Ajoutez/mettez à jour des paires clé-valeur localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Stockage {âge : 23, nom : labyrinthe, longueur : 2}

Équivalent à :

 localStorage.name = 'mazey'localStorage.age = '23'localStorage // Stockage {âge : 23, nom : mazey, longueur : 2}

Obtient la valeur de la clé spécifiée dans localStorage.

 localStorage.setItem('nom', 'mazey')localStorage.setItem('age', '23')localStorage.getItem('nom') // labyrinthelocalStorage.getItem('age') // 23localStorage.getItem('sex ') // nul

Équivalent à :

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.name // labyrinthelocalStorage['age'] // 23localStorage.sex // non défini

Supprime la paire clé-valeur pour la clé spécifiée de localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Stockage {âge : 23, nom : labyrinthe, longueur : 2}localStorage.removeItem('age') / / undefinedlocalStorage // {nom : mazey, longueur : 1}localStorage.removeItem('age') // non défini

Effacez toutes les paires clé-valeur dans localStorage.

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // Stockage {âge : 23, nom : labyrinthe, longueur : 2}localStorage.clear()localStorage // Stockage {longueur : 0}

localStorage ne peut stocker que des chaînes, donc les valeurs complexes telles que les tableaux/objets doivent d'abord être converties en chaînes à l'aide de JSON.stringify(), puis utiliser JSON.parse() pour les convertir en valeurs complexes avant utilisation.

 let arr = [1, 2, 3]localStorage.setItem('arr', arr)localStorage.getItem('arr') // 1,2,3// JSON.stringify()localStorage.setItem('arr', JSON.stringify(arr))localStorage.getItem('arr') // [1,2,3]JSON.parse(localStorage.getItem('arr')) ​​​​​​// [1, 2, 3]

Laissez la fenêtre surveiller le stockage de localStorage Lorsque le localStorage d'une étiquette change, les autres étiquettes répondent en conséquence.

test0.html - Modifiez localStorage.

 <input type=text id=input /><button onclick=setNameForStorage()>Set</button><script type=text/javascript> function setNameForStorage () { localStorage.name = document.querySelector('#input'). valeur</script>

test1.html - répond aux modifications de localStorage.

 <script type=text/javascript> window.addEventListener('storage', e => { console.log(e.key, e.newValue) // nom 123 })</script>

1. localStorage ne peut être utilisé que sous le même nom de domaine et peut être utilisé avec postMessage et iframe pour établir une communication entre domaines.
2. Les versions inférieures d'IE ne prennent pas en charge localStorage.
3. Il doit être utilisé dans un environnement serveur, c'est-à-dire qu'il ne peut pas être utilisé dans des environnements anormaux tels que file://.
4. Des problèmes imprévisibles peuvent survenir dans le stockage local mobile (H5, IOS, Android).

Veuillez arrêter d'utiliser le stockage local

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.