JavaScript utilise localStorage pour stocker les données

Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement comment JavaScript utilise localStorage pour stocker des données. L'exemple de code dans l'article est présenté de manière très détaillée et a une certaine valeur de référence.

[Recommandations associées : tutoriel vidéo javascript, front-end web]

Arrière-plan

Dans le passé, js utilisait Session et Cookie pour stocker des informations, comme si je restais encore A cette époque, quand j'ai demandé à mes collègues s'ils avaient de nouvelles solutions, j'ai appris qu'il existe désormais HTML5 localStorage stockage local, qui permet de stocker des données côté navigateur.

Je me souviens des premiers Cookies ne pouvaient stocker que de très petites choses, environ 4 Ko, et la sécurité était très mauvaise. À l'ère d'IE6, un nom de domaine ne pouvait contenir que vingt cookies. Bien sûr, les restrictions étaient assez importantes. , IE avait également Les trucs userData sont inutiles. Flash est également livré avec un espace de stockage relativement grand et occupant environ 25 fois l'espace de Cookie. À cette époque, Flash était également abandonné.

À l'ère H5, ils sont unifiés, LocalStorage domine le monde. La recommandation officielle est que chaque site Web doit faire 5 Mo , ce qui est très volumineux, bien que les paramètres du navigateur varient, mais cela suffit généralement pour stocker du JSON, des chaînes ou du cache.

Stockage local HTML5 LocalStorage

• sessionStorage : Les données enregistrées sont utilisées pour une session du navigateur. Lorsque la session se termine (généralement la fenêtre est fermée), les données sont effacées ;
  localStorage :
• Les données enregistrées existent depuis longtemps. La prochaine fois que vous visiterez le site Web, la page Web pourra lire directement les données précédemment enregistrées. Hormis les différentes périodes de stockage, les propriétés et méthodes des deux objets sont exactement les mêmes. Ils ressemblent beaucoup à une version améliorée du mécanisme de cookies, bien qu'ils puissent utiliser un espace de stockage beaucoup plus grand. Cependant, comme les cookies, ils sont également soumis aux mêmes restrictions de domaine. Les données stockées dans une page Web ne peuvent être lues que par les pages Web du même domaine.
  
En vérifiant si l'objet window contient les attributs sessionStorage et localStorage, vous pouvez déterminer si le navigateur prend en charge ces deux objets. Les données enregistrées par

function checkStorageSupport()
{
 // sessionStorage
 if (window.sessionStorage) {
  return true;
 } else {
  return false;
 }
 
 // localStorage
 if (window.localStorage) {
  return true;
 } else {
  return false;
 }
}

Opération de stockage

sessionStorage et localStorage existent toutes sous la forme de "Paires clé-valeur clé-valeur"

. En d’autres termes, chaque élément de données possède un nom de clé et une valeur correspondante. Toutes les données sont enregistrées au format texte.

//sessionStorage 操作
sessionStorage.setItem("key","value");     // setItem方法，存储变量名为key，值为value的变量
var valueSession = sessionStorage.getItem("key");  // getItem方法，读取存储变量名为key的值
sessionStorage.removeItem('key');      // removeItem方法，删除变量名为key的存储变量
sessionStorage.clear();        // clear方法，清除所有保存数据
//localStorage 操作
localStorage.setItem("key","value");     // 存储变量名为key，值为value的变量
localStorage.key = "value"        // 同setItem方法，存储数据
var valueLocal = localStorage.getItem("key");   // 读取存储变量名为key的值
var valueLocal = localStorage.key;      // 同getItem，读取数据
localStorage.removeItem('key');      // removeItem方法，删除变量名为key的存储变量
localStorage.clear();         // clear方法，清除所有保存的数据

// 利用length属性和key方法，遍历所有的数据
for(var i = 0; i < localStorage.length; i++)
{
 console.log(localStorage.key(i));
}

// 存储 localStorage 数据为 Json 格式
value = JSON.stringify(jsonValue);      // 将 JSON 对象 jsonValue 转化成字符串
localStorage.setItem("key", value);     // 用 localStorage 保存转化好的的字符串

// 读取 localStorage 中 Json 格式数据
var value = localStorage.getItem("key");    // 取回 value 变量
jsonValue = JSON.parse(value);      // 把字符串转换成 JSON 对象

Événement de stockage

Lorsque les données stockées changent, l'événement de stockage sera déclenché. Nous pouvons spécifier une fonction de rappel pour cet événement.

window.addEventListener("storage",onStorageChange);

La fonction de rappel accepte un objet événement comme paramètre. L'attribut key de cet objet événement enregistre le nom de clé modifié.

function onStorageChange(e)
{
  console.log(e.key); 
}

En plus de l'attribut key, l'objet événement possède trois attributs :

oldValue : la valeur avant mise à jour. Si la clé est nouvellement ajoutée, cet attribut est nul.

newValue : valeur mise à jour. Si la clé a été supprimée, cette propriété est nulle.

• url : L'URL de la page Web qui a initialement déclenché l'événement de stockage.
• Une attention particulière est que cet événement n'est pas déclenché sur la page actuelle, ce qui entraîne une modification des données. Si le navigateur ouvre plusieurs pages sous un nom de domaine en même temps, lorsqu'une des pages modifie les données de sessionStorage ou localStorage, les événements de stockage de toutes les autres pages seront déclenchés et l'événement de stockage ne sera pas déclenché par l'original. page. La communication entre plusieurs fenêtres peut être réalisée grâce à ce mécanisme. Parmi tous les navigateurs, à l'exception d'IE, cela déclenchera l'événement de stockage sur toutes les pages.
  

Développer les connaissances

1. localStorage et sessionStorage sont deux méthodes de stockage fournies par le stockage Web HTML5. Elles sont prises en charge par IE7 et supérieur et la plupart des navigateurs2. ), localStorage et sessionStorage sont tous deux des objets utilisés pour stocker des informations temporaires sur le client.

(2). Ils ne peuvent stocker que des objets de type chaîne (bien que d'autres types d'objets natifs puissent être stockés dans la spécification, mais jusqu'à présent aucun navigateur ne l'a implémenté).

(3). Le cycle de vie de localStorage est permanent, ce qui signifie qu'à moins que l'utilisateur n'efface les informations de localStorage sur l'interface utilisateur fournie par le navigateur, ces informations existeront pour toujours. (enregistré en mémoire)

　Le cycle de vie de sessionStorage est la fenêtre ou l'onglet actuel. Une fois la fenêtre ou l'onglet fermé, toutes les données stockées via sessionStorage seront effacées (stockage de session)

(4) Différents navigateurs ne peuvent pas partager localStorage ou des informations dans sessionStorage. Différentes pages d'un même navigateur peuvent partager le même localStorage (les pages appartiennent au même nom de domaine et au même port), mais les informations de sessionStorage ne peuvent pas être partagées entre différentes pages ou onglets.

Il convient de noter ici que les pages et les onglets ne font référence qu'aux fenêtres de niveau supérieur. Si un onglet contient plusieurs balises iframe et qu'elles appartiennent à la même page source, alors sessionStorage peut être partagé entre elles. (Même principe d'origine)

3. La taille des données pouvant être stockées par localStorage et sessionStorage est généralement de 5 Mo

[Recommandations associées : tutoriel vidéo javascript, front-end web]

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!