HTML5 WebStorage (technologie de stockage local HTML5)_CSS/HTML

WebStorage est l'une des solutions de stockage local en HTML5. Avant l'introduction du concept WebStorage de HTML5, les données utilisateur d'IE, Flash Cookie, Google Gears et d'autres solutions peu fiables ont été supprimées. En utilisant uniquement des cookies. Certains étudiants peuvent se demander, puisque nous avons un stockage local de cookies, pourquoi devons-nous introduire le concept de WebStorage ?

Qu'est-ce qui ne va pas avec Cookie

Les défauts des cookies sont très évidents

1. Taille des données : en tant que conteneur de stockage, la taille du cookie est limitée à environ 4 Ko, ce qui est très ennuyeux, en particulier pour les exigences actuelles de logique métier complexe. En plus de stocker certains champs de configuration, la capacité de 4 Ko stocke également des fichiers simples. informations à valeur unique. La plupart des développeurs ne savent vraiment pas à quoi s’attendre.
2. Problèmes de sécurité : étant donné que le cookie dans la requête HTTP est transmis en texte clair (ce qui n'est pas le cas du HTTPS), les problèmes de sécurité sont toujours énormes.
3. Charge du réseau : Nous savons que des cookies seront attachés à chaque requête HTTP et seront transmis dans les en-têtes de HttpRequest et HttpResponse, donc des pertes de trafic inutiles seront ajoutées.

WebStorage

WebStorage est l'une des nouvelles solutions de stockage local pour HTML, mais ce n'est pas une norme développée pour remplacer les cookies. Les cookies sont indispensables dans le cadre du protocole HTTP pour gérer la communication client et serveur. La session dépend de l'implémentation. préservation de l’État. Le but de WebStorage est de résoudre le problème du stockage local qui ne doit pas se faire avec des cookies, mais doit utiliser des cookies.
WebStorage fournit deux types d'API : localStorage et sessionStorage. La différence entre les deux peut être grossièrement comprise en regardant les noms. localStorage stocke les données localement de manière permanente, sauf si elles sont explicitement supprimées ou effacées. la session. Elle est valable pendant une certaine durée et sera automatiquement supprimée lorsque vous fermerez le navigateur. Les deux objets ont une API commune.

Copier le code Le code est le suivant :

interface Storage {
attribut en lecture seule non signé long length;
DOMString? key(unsigned long index);
getter DOMString getItem(DOMString key);
setter Creator void setItem(DOMString key, DOMString value);
deleter void removeItem(DOMString key );
void clear();
};

1. Longueur : Le seul attribut, en lecture seule, utilisé pour obtenir le nombre de paires clé-valeur dans le stockage.
2. key : obtenez le nom de la clé du stockage en fonction de l'index
3. getItem : obtenez la valeur correspondante dans le stockage en fonction de la clé
4. le stockage
5. removeItem : Selon le nom de la clé, supprimez la paire clé-valeur
6. clear : effacez l'objet de stockage

Comment utiliser WebStorage

Dans un navigateur qui implémente WebStorage, la page comporte deux objets globaux, localStorage et sessionStorage

Prenons localStorage comme exemple , regardez un code d'opération simple

Copiez le code Le code est le suivant :

var ls=localStorage;
            console.log(ls.length);//0
            ls.setItem('name','Byron');
            ls.setItem(' age','24');
            console.log(ls.length);//2

            //遍历localStorage
            for(var i=0;i                /*
                    âge : 24
                    nom : Byron
                 */
                var key=ls.key(i);
                console.log(key+' : '+ls .getItem(key));
            }

            ls.removeItem('age');

           
            for(var i=0;i                /*
                    nom : Byron
               */
                var key=ls.key(i);
                console.log(key+' : '+ls.getItem(key));
            }
            ls.clear();//0
            console.log(ls.length);

事件

同时HTML5规定了一个storage事件, et WebStorage发生变化的时候触发，可以用此监视不同页面对stockage的修改

复制代码 代码如下 :

interface StorageEvent : Événement {
  clé DOMString d'attribut en lecture seule ;
 attribut DOMString en lecture seule ? oldValue;
 attribut en lecture seule DOMString ? newValue;
 attribut en lecture seule DOMString url;
 attribut en lecture seule Stockage ? storageArea;
};

1、key:键值对的键
2、oldValue：修改之前的value
3、newValue：修改之后的value
4、url：触发改动的页面url
5、StorageArea：发生改变的Storage

Test

复制代码

代码如下 :

window.addEventListener('storage',function(e) {                console.log(e.key+' est modifié de '+e.oldValue+' en '+e.newValue+' par '+e.url );

                 console.log(e.storageArea ==localStorage) ;

            },false);            localStorage.setItem('userName','Byron');

test.php

复制代码

代码如下:

localStorage.setItem('userName ','Casper');

Lorsque vous cliquez sur le lien sur la page index.php pour accéder à test.php, vous pouvez voir le journal de sortie de la console d'index.php :
le nom d'utilisateur est modifié de Byron à Casper par http://localhost/test .php
vrai

Pourquoi c'est mieux que les cookies

1. En termes de capacité, WebStorage fournit généralement 5M d'espace de stockage dans les navigateurs, ce qui n'est pas suffisant pour stocker des vidéos et des images, mais c'est suffisant pour la plupart des opérations
2 En termes de sécurité, WebStorage ne le fait pas. joue un rôle L'en-tête HTTP est envoyé par le navigateur, il est donc relativement sûr
3. En termes de trafic, comme WebStorage n'est pas transmis au serveur, le trafic inutile peut être économisé, ce qui reste très pratique pour les hautes fréquences visites ou pages Web ciblant les appareils mobiles. Pas mal.
Cela ne signifie pas que WebStorage peut remplacer les cookies, mais avec WebStorage, les cookies ne peuvent faire que ce qu'ils sont censés faire : servir de canal d'interaction entre le client et le serveur et maintenir l'état du client. WebStorage est donc supérieur aux cookies, tout comme une solution de stockage local.

Choses à noter

1. Compatibilité des navigateurs, c'est presque la plus simple à implémenter parmi toutes les nouvelles fonctionnalités HTML5, car les navigateurs IE8+ la prennent en charge, et dans IE7, IE6 peut être implémenté. en utilisant les données utilisateur d'IE.

2. Puisque localStorage et sessionStorage sont tous deux des objets, vous pouvez également obtenir et modifier des paires clé-valeur via ".key" ou "[key]", mais cela n'est pas recommandé.

 2. 由于localStorage和sessionStorage都是对象，所以我饿每年也可以通过”.key”或”[key]”的方式获取、修改键值对，但不推荐这么做 。

复制代码 代码如下:

localStorage.userName='Frank';
console.log(localStorage['userName']);

3.虽然localStorage存储在本地，但不同的浏览器存储存储数据是独立的，所以在Chrome上存储的localStorage在FireFox上是获取不到的。
4. localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理，低版本IE可以使用json2.js
5.除了控制台，Chrome还为本地存储提供了非常直观的显示方式，调试的时候很方便

Copier le code Le code est le suivant :

localStorage.userName='Frank'; console.log(localStorage['userName']);

3. Bien que localStorage soit stocké localement, différents navigateurs stockent les données indépendamment, de sorte que le localStorage stocké sur Chrome n'est pas disponible. sur FireFox. 4. localStorage et sessionStorage ne peuvent stocker que des types de chaînes. Pour les objets complexes, vous pouvez utiliser stringify et analyser les objets JSON fournis par ECMAScript pour les gérer. à la console, Chrome fournit également une méthode d'affichage très intuitive du stockage local, très pratique lors du débogage