Tutoriel avancé HTML5 - Stockage Web

Avant-propos

HTML5 propose deux méthodes de stockage de stockage Web : localStorage et sessionStorage.

Les deux méthodes enregistrent les données via des paires clé-valeur, qui sont faciles d'accès et n'affectent pas les performances du site Web. Leur utilisation est la même, mais leurs durées de stockage sont différentes.
Les données LocalStorage sont enregistrées sur le matériel local et peuvent être enregistrées de manière permanente. L'API peut être appelée manuellement pour effacer les données. sessionStorage est stocké dans l'objet session et sera effacé à la fermeture du navigateur.

La taille du stockage Web est limitée sur le navigateur. La taille des différents navigateurs sera différente dans les navigateurs grand public, la taille est d'environ 5 Mo, ce qui est en fait suffisant pour stocker des données ordinaires.

Utilisation

Prenons localStorage comme exemple. L'utilisation de sessionStorage est la même :

setItem

Enregistrer les données : localStorage.setItem(key, value). );

Exemple :

localStorage.setItem('name','Hello World');

Lorsque les clés sont les mêmes, la valeur précédente sera écrasée pour modifier les données. Si la valeur est un objet, elle doit être convertie en chaîne json, sinon ce que vous lisez sera [object Object]

getItem

Read data: localStorage.getItem(key);

Exemple :

localStorage.getItem('name');       // Hello World

removeItem

SupprimerDonnées uniques : localStorage.removeItem(key);

Exemple :

localStorage.removeItem('name');
localStorage.getItem('name');       // null

Après avoir supprimé les données avec le nom de la clé, les données ne peuvent pas être obtenues dans loaclStorage, donc null est renvoyé ;

clear

Supprimer toutes les données : localStorage.clear();

Exemple :

localStorage.clear();

À ce moment, toutes les données de localStorage seront supprimées.

key

Obtenir la clé d'un certain index : localStorage.key(index);
Exemple :

localStorage.setItem('name1','Hello World');
localStorage.setItem('name2','Hello Linxin');
localStorage.key(1);                // name2

Obtenir le index La clé est 1, qui est nom2.

Constructeur

Dans les projets réels, localStorage peut devoir être utilisé plusieurs fois. Nous pouvons utiliser un constructeur pour un meilleur fonctionnement.

Exemple :

var localEvent = function (item) {
    this.get = function () {
        return localStorage.getItem(item);
    }
    this.set = function (val) {
        localStorage.setItem(item, val);
    }
    this.remove = function () {
        localStorage.removeItem(item);
    }
    this.clear = function () {
        localStorage.clear();
    }
}

// 使用new字符把构造函数实例化出多个对象
var local1 = new localEvent('name1');
var local2 = new localEvent('name2');

local1.set('Hello World');
local2.set('Hello Linxin');

local1.get();               // Hello World
local2.get();               // Hello Linxin

Ceci est juste une simple démonstration Si nous stockons habituellement des objets dans nos projets, nous devons effectuer quelques traitements dans le code.

Écouter les événements de stockage

Vous pouvez écouter l'événement de stockage de l'objet fenêtre et spécifier sa fonction de gestion des événements, lorsque localStorage ou sessionStorage est traité dans la page. Une fois modifié, la fonction de traitement correspondante sera déclenchée.

window.addEventListener('storage',function(e){
    console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);
})

L'objet temporel (valeur du paramètre e) qui déclenche l'événement possède plusieurs attributs :

• clé : valeur clé.

• oldValue : la valeur avant modification.

• newValue : la valeur modifiée.

• url : URL de la page.

• storageArea : l'objet de stockage modifié.

Remarque : Dans Google Chrome, le stockage doit être modifié dans différents onglets pour déclencher cet événement, c'est-à-dire que la page Web A écoute cet événement et que localStorage est modifié dans la page Web B. , alors la page Web A déclenchera la fonction événementielle. Mais dans IE, la modification de localStorage sur la même page Web déclenchera cet événement.

Débogage

Les outils de débogage fournis avec Google Chrome (chrome devtools) sont très faciles à utiliser et peuvent être utilisés pour déboguer localStorage et sessionStorage. Ouvrez le navigateur et appuyez sur f12 pour afficher l'outil de débogage. Vous pouvez voir Application. Cliquez pour ouvrir et vous pouvez voir Stockage dans la colonne de gauche, y compris localStorage, sessionStorage, IndexedDB, etc. Sélectionnez le nom de domaine du site Web que nous souhaitons. debug, et vous pouvez voir la clé correspondante à droite et la valeur, qui peuvent être modifiées ou supprimées par un clic droit.

Compatible

Il est compatible avec IE8 et supérieur, mais il est spécial et doit être ouvert sur le serveur Double-cliquer directement sur fichier:// pour ouvrir le fichier est incompatible.

Seul IE11 prend en charge l'ouverture sous file://. D'autres navigateurs ont un haut degré de prise en charge, y compris la compatibilité sur les téléphones mobiles.

[Recommandations associées]

1. Tutoriel vidéo en ligne h5 gratuit

2. Manuel de la version complète HTML5

3. Tutoriel vidéo html5 original php.cn

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!