Tutoriel sur l'utilisation de localStorage dans HTML5

Cet article présente principalement le tutoriel sur l'utilisation de LocalStorage dans HTML5. LocalStorage est utilisé pour l'interaction sortante locale entre le navigateur et le système. Les amis qui en ont besoin peuvent se référer à ce qu'est LocalStorage

Il y a quelques jours, j'ai découvert qu'il y avait une étrange opération de cookies dans un ancien projet. Après la consultation, je voulais mettre en cache des informations pour éviter de passer des paramètres sur l'URL, mais je n'ai pas considéré les problèmes que les cookies apporteraient:

① La taille du cookie est limitée à environ 4K, ce qui ne convient pas au stockage des données commerciales.

② Les cookies sont envoyés avec des transactions HTTP à chaque fois, gaspillant la bande passante

Nous réalisons des projets mobiles, donc la vraie technologie qui convient à une utilisation ici est LocalStorage. LocalStorage peut être considéré comme une optimisation des cookies. L'utiliser peut faciliter le stockage des données du côté client et ne sera pas transmis avec HTTP, mais ce n'est pas sans problèmes:

① La taille locale du storage est limitée à environ 5 millions de caractères, et chaque navigateur est incohérent

② Localstorage n'est pas lisible en mode confidentialité

③ LocalStorage est essentiellement des fichiers de lecture et d'écriture. S'il y a trop de données, ce sera plus coincé (Firefox importera des données en mémoire à la fois, et ce sera effrayant si vous y réfléchissez)

④ Localstorage ne peut pas être rampé par les robots, ne l'utilisez pas pour remplacer complètement les paramètres d'URL

Les défauts ne cachent pas les mérites, et tous les problèmes ci-dessus peuvent être évités, donc notre objectif devrait être de savoir comment utiliser LocalStorage et comment les utiliser correctement.

Utilisation de LocalStorage

Il existe deux types d'objets de stockage localStorage:

① SessionStrage: Session signifie Session. Ici, la session fait référence à la période de validité de l'objet de session n'est si longue que lorsqu'un utilisateur parcourt un certain site Web.

② LocalStorage: Enregistrez les données sur le périphérique matériel client, peu importe ce que cela signifie que les données sont toujours là la prochaine fois que vous ouvrez l'ordinateur.

La différence entre les deux est que l'une est une préservation temporaire et l'autre est une préservation à long terme.

Voici un code simple pour illustrer son utilisation de base: