Une brève introduction aux API HTML5-Web Storage

1. Présentation
Le stockage Web est une méthode de stockage de données côté client. Comparé au Cookie, le stockage Web est plus sécurisé et peut stocker plus de objets, et pas seulement des chaînes ; plutôt que des cookies qui ne peuvent stocker que quelques Ko de données ; le stockage Web peut également réduire la conversion des données entre le client et le serveur, réduisant ainsi la bande passante.
Le cœur de Web Storage est sessionStorage et localStorage, deux sous-objets de l'objet window. Les données sont stockées sous forme de paires clé-valeur via ces deux objets. Les deux objets implémentent l'interface de stockage, ont des propriétés et des méthodes portant les mêmes noms et ont le même usage. La différence réside dans la durée de stockage et la portée du partage des deux.
La durée de stockage des données de sessionStorage dépend de la durée d'existence de la fenêtre ou de l'onglet du navigateur où elles sont stockées, et la portée du partage se situe uniquement dans la fenêtre ou l'onglet du navigateur où elles ont été générées.
La durée de stockage des données localStorage dépasse la durée d'ouverture du navigateur Sauf suppression manuelle ou via code, sa portée de partage se situe entre les pages du même site d'origine.
De nombreux navigateurs ne prennent pas en charge l'accès sessionStorage au système de fichiers local , il doit donc être utilisé via le serveur Web.
La spécification de Web Storage permet le stockage de tout type de données, mais dans chaque implémentation de navigateur, la plupart des valeurs permettent le stockage de données texte de chaîne, mais vous pouvez utiliser Web Storage combiné avec JSON technologie pour stocker des données non textuelles.
Une méthode de stockage de données plus avancée est Web SQL Database pour le stockage de base de données basé sur index et dispose d'un langage de requête SQL SQLite. Web SQL Database n'est actuellement pris en charge que par Safari, Chrome et Opera. La spécification finale n’adoptera probablement pas cette approche. Une autre méthode est IndexedDB, qui n'est prise en charge que par FireFox 4 ou supérieur.

2. Détection de prise en charge du navigateur

 function checkStorageSupport() { 
  //sessionStorage 
  
if
 (window.sessionStorage) { 
    alert('This browser supports sessionStorage'); 
  } 
else
 { 
    alert('This browser does NOT support sessionStorage'); 
  } 
  //localStorage 
  if (window.localStorage) { 
    alert('This browser supports localStorage'); 
  } else { 
    alert('This browser does NOT support localStorage'); 
  } 
}

3.Interface de stockage

  interface Storage { 
     //同源键值对的数目
     readonly attribute unsigned long length; 
     //通过索引获取键，索引从0开始
     getter DOM
String
 
key
(in unsigned long index); 
     //通过键获取值，键若不存在，值将返回
null
     getter any getItem(in DOMString key); 
     //存储键值对，若已存在同名键，则值将被覆盖。若用户关闭了浏览器存储或是已超     //过允许存储的最大值，都将产生QUOTA_EXCEEDED_ERR错误。
     
set
ter creator void setItem(in DOMString key, in any data); 
     //通过键删除值，不存在则什么也不做
     
delete
r void removeItem(in DOMString key); 
     //删除storage中所有键值对，若为空则什么也不做
     void 
clear
(); 
   };

4. Lecture et stockage des données

  //---------------方式一--------------
   //存储数据
   window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’); 
   //读取数据
   alert(window.sessionStorage.getItem(‘myFirstKey’)); 
   //---------------方式二--------------
   //存储数据
   window.sessionStorage.myFirstKey = ‘myFirstValue’;
   //读取数据
   alert(window.sessionStorage.myFirstKey); 
   //---------------方式三--------------
   var varKey = sessionStorage.key(index);
   window.sessionStorage[varKey] = 
new
Value;

5. Stockage événements
La communication entre Web Storage et autres pages, fenêtres ou onglets du navigateur et Web Workers peut être effectuée via des événements de stockage pour continuer. . Les objets de même origine peuvent écouter les événements de stockage. Ajoutez la méthode d'écoute des événements de stockage comme suit :

  window.addEventListener("storage", displayStorageEvent, true);

6. Interface StorageEvent
L'objet d'événement de stockage implémente l'interface StorageEvent. La déclaration de cette interface est la suivante :

 interface StorageEvent : Event { 
      readonly attribute DOMString key; 
      readonly attribute any oldValue; 
      readonly attribute any newValue; 
      readonly attribute DOMString url; 
      //该方法提供了一个对发生storage事件对象的
引用
，这个对象可以是
      //sessionStorage或localStorage
      readonly attribute Storage storageArea;
   };

6. Gérer le quota maximum
La plupart des navigateurs autorisent le stockage Web à ne pas dépasser 5 Mo Afin d'éviter que la limite du quota ne soit dépassée lors du stockage des données, vous pouvez utiliser la méthode de capture du QUOTA_EXCEEDED_ERR. exception pour le gérer, par exemple :

try
   {
      sessionStorage["name"] = "Tabatha";
   }
   catch (
exception
)
   {
      if (exception == QUOTA_EXCEEDED_ERR)
      { 
         // we should tell the user their quota has been exceeded. 
      }
   }

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!