Le maître vous explique en détail le stockage local et le stockage par visualisation.

Le contenu que cet article vous apporte concerne le stockage local et le stockage par sessions. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. [Tutoriel avancé : Tutoriel HTML5]

La propriété sessionStorage permet d'accéder à un objet Storage de session. Il est similaire à localStorage, sauf que les données stockées dans localStorage n'ont pas de paramètre de délai d'expiration, tandis que les données stockées dans sessionStorage seront effacées à la fin de la session de page. La session de page est maintenue pendant que le navigateur est ouvert, et le rechargement ou la restauration de la page maintiendra la session de page d'origine. L'ouverture d'une page dans un nouvel onglet ou une nouvelle fenêtre initialise une nouvelle session, ce qui est différent du fonctionnement des cookies de session.

localStorage en lecture seule vous permet d'accéder à l'objet distant (d'origine) Le stockage 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 et lorsque la session de la page se termine, c'est-à-dire lorsque la page est fermée, les données stockées dans sessionStorage seront effacées.

Pour faire simple, localStorage est une solution de stockage persistant pour le navigateur. La différence entre sessionStorage et session est qu'il n'existe que dans une seule page. SessionStorage sera réinitialisé lorsqu'une nouvelle page est ouverte. A noter que que les données soient stockées dans localStorage ou sessionStorage, elles sont spécifiques au protocole de la page

Utilisation de base

On regarde d'abord le fonctionnement de sessionStorage

1. Enregistrez les données dans sessionStorage sessionStorage.setItem('key', 'value');

2. Obtenez les données de sessionStorage

var sessionData = sessionStorage.getItem('key');

3.

sessionStorage.removeItem('key');

4. Supprimez tout

sessionStorage.clear();

Le même stockage local a des opérations similaires

1. Enregistrer les données

localStorage.setItem(`key`, `value`);

2. data

let cat = localStorage.getItem(`key`);

3. Supprimer une seule donnée

localStorage.removeItem(`key`);

4. Supprimer tout

localStorage.clear();

Vous pouvez obtenir le nombre de paires clé-valeur dans localStorage. via localStorage.length, de la même manière. Vous pouvez également parcourir les valeurs clés stockées dans localStorage via la méthode localStorage.key().

Événement de stockage

Lorsque les données stockées changent, l'événement de stockage sera déclenché. Mais il convient de noter qu'il est différent de l'événement de clic qui capture et bouillonne. L'événement de stockage ressemble davantage à une notification et ne peut pas être annulé. Le déclenchement de cet événement appellera l'événement de stockage des autres fenêtres du même domaine, mais la fenêtre qui déclenche le stockage (c'est-à-dire la fenêtre actuelle) ne déclenchera pas cet événement. Les attributs communs de l'objet événement du stockage sont les suivants (la fenêtre actuelle ne se déclenche pas, d'autres fenêtres se déclencheront).

Les attributs communs de changeEvent sont les suivants :

oldValue：更新前的值。如果该键为新增加，则这个属性为null。
newValue：更新后的值。如果该键被删除，则这个属性为null。
url：原始触发storage事件的那个网页的网址。
key：存储store的key名

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!