Explication détaillée de l'instance de stockage de stockage local HTML5-Tutoriel H5-php.cn

HTML5storage permet aux sites Web de stocker des informations localement sur votre ordinateur et de les récupérer en cas de besoin ultérieur. Ce concept est similaire au cookie, mais la différence est qu'il est conçu pour une plus grande capacité de stockage. La taille du Cookie est limitée, et le cookie sera envoyé à chaque fois que vous demanderez une nouvelle page. Le stockage de HTML5 est stocké sur votre ordinateur Une fois la page chargée, le site Web peut utiliser . Javascript pour obtenir ces données.

1, sessionStorage

Détection

!!window.sessionStorage;

Méthodes courantes

.key = value
.setItem(key,value)
.getItem(key)
.removeItem(key)
.clear()

Copier après la connexion

window.sessionStorage.name = &#39;rainman&#39;;           // 赋值  
window.sessionStorage.setItem(&#39;name&#39;,&#39;cnblogs&#39;);  // 赋值  
window.sessionStorage.getItem(&#39;name&#39;);            // 取值  
window.sessionStorage.removeItem(&#39;name&#39;);         // 移除值  
window.sessionStorage.clear();          // 删除所有sessionStorage

Copier après la connexion

Événement :

window.onstorage

Détecter les changements de valeur, la prise en charge du navigateur n'est pas bonne.

Remarque :

Le stockage des cookies est limité à 4 Ko. En comparaison, le stockage de session a un stockage plus grand. espace, mais quant à la taille spécifique, elle dépend de l'implémentation spécifique du fabricant du navigateur.
Cookie a un mécanisme qui consiste à envoyer le cookie au serveur à chaque fois que le client demande au serveur. Cela fera sans aucun doute beaucoup d'opérations inutiles, car toutes les demandes du serveur ne sont pas effectuées. a besoin de toutes les informations du cookie et le stockage de session résout très bien ce problème. Il ne les envoie pas automatiquement, ce qui réduit le travail inutile.
Le cycle de vie des données stockées via sessionStorage est similaire à Session. Les données n'existeront plus après la fermeture du navigateur (ou de l'onglet). Mais sessionStorage existe toujours après avoir actualisé la page ou utilisé le bouton "suivant" ou "retour".
La valeur de chaque fenêtre de stockage de session est indépendante (chaque fenêtre a ses propres données). Ses données disparaîtront à la fermeture de la fenêtre. Le stockage de session entre fenêtres ne peut pas non plus être partagé. .
La clé et la valeur dans setItem sont stockées sous forme de chaînes. C'est-à-dire que s'il y a le code suivant : setItem('count', 1); ce que vous obtiendrez via getItem('count') + 5 ne sera pas le 6 (entier) attendu, mais '16' (string) .
Lorsque vous utilisez à nouveau setItem pour définir la valeur d'une clé existante, la nouvelle valeur remplacera l'ancienne valeur.
Lorsque les données stockées changent, l'événement correspondant (window.onstorage) sera déclenché. Cependant, la prise en charge actuelle de divers navigateurs pour cet événement n'est pas parfaite et peut être ignorée. le moment étant.

2, stockage local

Détecter la méthode

!!window.localStorage ;

et sessionStorage ; Idem

Instructions :

Le stockage local stocke uniquement les données dans Pour le client utilisé, il ne sera pas envoyé au serveur (sauf si vous le faites intentionnellement).
Et pour un certain domaine, le stockage local est partagé (plusieurs fenêtres partagent une "base de données").
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

举例

//结合JSON.stringify使用更强大    
var person = {&#39;name&#39;: &#39;rainman&#39;, &#39;age&#39;: 24};    
localStorage.setItem("me", JSON.stringify(person));    
JSON.parse(localStorage.getItem(&#39;me&#39;)).name;    // &#39;rainman&#39;    
    
/**  
* JSON.stringify，将JSON数据转化为字符串  
* JSON.stringify({&#39;name&#39;: &#39;fred&#39;, &#39;age&#39;: 24});   // &#39;{"name":"fred","age":24}&#39;  
* JSON.stringify([&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]);               // &#39;["a","b","c"]&#39;  
* JSON.parse，反解JSON.stringify  
* JSON.parse(&#39;["a","b","c"]&#39;)                    // ["a","b","c"]  
*/

Copier après la connexion

3、Database Storage

对简单的数据存储，使用sessionStorage和localStorage能够很好地完成，但是在对琐碎的关系数据进行处理之外，它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。

A、打开链接

var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000);    // 打开链接  
if(!db) { alert("Failed to connect to database."); }        // 检测连接是否创建成功

Copier après la connexion

以上代码创建了一个数据库对象 db，名称是 Todo，版本编号为0.1。db 还带有描述信息和大概的大小值。如果需要，这个大小是可以改变的，所以没有必要预先假设允许用户使用多少空间。

绝不可以假设该连接已经成功建立，即使过去对于某个用户它是成功的。为什么一个连接会失败，存在多个原因。也许用户代理出于安全原因拒绝你的访问，也许设备存储有限。面对活跃而快速进化的潜在用户代理，对用户的机器、软件及其能力作出假设是非常不明智的行为。比如，当用户使用手持设备时，他们可自由处置的数据可能只有几兆字节。

B、执行查询

db.transaction( function(tx) {   
    tx.executeSql(  
     "INSERT INTO ToDo (label, timestamp) values(?, ?)",   
     [&#39;lebel&#39;, new Date().getTime()],   
      function(tx2, result){ alert(&#39;成功&#39;); },   
          function(tx2, error){ alert(&#39;失败:&#39; + error.message); }  
    );   
});

Copier après la connexion

执行SQL语句使用database.transaction()函数，该函数只有一个参数，负责执行查询的函数。
该函数具有一个类型事务的参数（tx）。
该事务参数（tx）具有一个函数：executeSql()。这个函数使用四个参数：
表示查询的SQL字符串；插入到查询中问号所在处的字符串数据；一个成功时执行的函数；一个失败时执行的函数。
执行成功的函数有两个参数：tx2，事务性参数；result，执行的返回结果，结构如图
执行成功的函数也有两个参数：tx2，事务性参数；error，错误对象，结构如图

C、其它

Chrome支持； firefox（测试时版本4.01）不支持；IE8不支持。

D、示例

  //创建数据库    
  var db = openDatabase("users", "1.0", "用户表", 1024 * 1024);     
  if(!db){    
      alert("Failed to connect to database.");     
  } else {    
      alert("connect to database &#39;K&#39;.");     
  }    
      
  // 创建表    
 db.transaction( function(tx) {     
     tx.executeSql(    
         "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)",     
         [],     
         function(){ alert(&#39;创建users表成功&#39;); },     
         function(tx, error){ alert(&#39;创建users表失败:&#39; + error.message); }    
     );    
 });     
     
 // 插入数据    
 db.transaction(function(tx) {     
     tx.executeSql(    
         "INSERT INTO users (id, name) values(?, ?)",     
         [Math.random(), &#39;space&#39;],     
         function(){ alert(&#39;插入数据成功&#39;); },     
         function(tx, error){ alert(&#39;插入数据失败: &#39; + error.message);}    
     );     
 });     
     
 // 查询    
 db.transaction( function(tx) {     
     tx.executeSql(    
         "SELECT * FROM users", [],      
          function(tx, result) {    
             var rows = result.rows, length = rows.length, i=0;    
             for(i; i < length; i++) {     
                 alert(    
                     &#39;id=&#39; + rows.item(i)[&#39;id&#39;] +     
                     &#39;name=&#39;+ rows.item(i)[&#39;name&#39;]    
                 );     
             }     
         },     
         function(tx, error){    
             alert(&#39;Select Failed: &#39; + error.message);    
         }    
     );     
 });     
     
 // 删除表    
 db.transaction(function (tx) {      
     tx.executeSql(&#39;DROP TABLE users&#39;);     
 });

Copier après la connexion

4、globalStorage

这个也是html5中提出来，在浏览器关闭以后，使用globalStorage存储的信息仍能够保留下来，localStorage一样，域中任何一个页面存储的信息都能被所有的页面共享

基本语法

globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通过这个命名空间存储对象来进行读和写。
globalStorage['mozilla.org'] - Toutes les pages Web sous le nom de domaine mozilla.org peuvent être lues et écrites via cet objet de stockage d'espace de noms.
globalStorage['org'] - Toutes les pages Web sous le nom de domaine .org peuvent être lues et écrites via cet objet de stockage d'espace de noms.
globalStorage[''] - Toute page Web sous n'importe quel nom de domaine peut être lue et écrite via cet objet de stockage d'espace de noms

Attributs de la méthode

setItem(key, value) - Définit ou réinitialise la valeur de la clé.
getItem(key) —— Obtenez la valeur clé.
removeItem(key) - Supprime la valeur de la clé.
Définir la valeur de la clé : window.globalStorage["planabc.net"].key = value;
Obtenir la valeur de la clé : value = window .globalStorage["planabc.net"].key;

Autre

Expiré L'heure est la même que celle de localStorage et certaines autres fonctionnalités sont également similaires à celles de localStorage.
Firefox ne prend désormais en charge que le stockage globalStorage dans le domaine actuel. Si vous utilisez le domaine public, cela provoquera une erreur similaire au code « Erreur de sécurité » : « 1000 ».

5, Compatibilité

Internet Explorer

localStorage

方法	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
localStorage	4	2	8	10.50	4
sessionStorage	5	2	8	10.50	4
globalStorage	--	2	--	--	--

Méthode