Compréhension approfondie de l'objet sessionStorage en HTML5

Le contenu de cet article est une compréhension approfondie de l'objet sessionStorage de HTML5. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

HTML5 sessionStorage session Storage

sessionStorage est un nouvel objet de stockage de session en HTML5, qui est utilisé pour enregistrer temporairement les données de la même fenêtre (ou onglet). Les données seront supprimées après la fermeture de la fenêtre. ou onglet. Cet article présente principalement comment utiliser sessionStorage (stockage de session). Y compris des opérations telles que l'ajout, la modification et la suppression.

Table des matières

1. Introduction

1.1 Description

1.2 Fonctionnalités

1.3 Prise en charge de la version minimale du navigateur

1.4 Adapté aux scénarios

2. Membres

2.1 Propriétés

2.2 Méthodes

3. Exemples

3.1 Données de stockage

　3.2 Lecture des données

　3.3 Stockage de l'objet Json

1 Introduction

1.1 Description

sessionStorage est nouveau dans HTML5 Un objet de stockage de session utilisé pour enregistrer temporairement les données de la même fenêtre (ou onglet). Les données seront supprimées après la fermeture de la fenêtre ou de l'onglet.

Cet objet peut être appelé via window.sessionStorage ou sessionStorage en langage JavaScript.

1.2 Fonctionnalités

1) Mêmes restrictions de politique d'origine. Si vous souhaitez opérer le même sessionStorage entre différentes pages, ces pages doivent être sous le même protocole, le même nom d'hôte et le même port. (IE 8 et 9 stockent les données uniquement sur la base du même nom d'hôte, en ignorant les exigences en matière de protocole (HTTP et HTTPS) et de numéro de port)

2) Limite d'un seul onglet. L'opération sessionStorage est limitée à une seule page à onglet, et les données de sessionStorage peuvent être partagées en accédant à la page de même origine dans cette page à onglet.

3) Magasinez uniquement localement. Les données de sessionStorage ne seront pas envoyées au serveur avec la requête HTTP. Elles ne prendront effet que localement et les données seront effacées après la fermeture de l'onglet. (Si vous utilisez la fonction de récupération des onglets de Chrome, les données de seesionStorage seront également récupérées).

4) Méthode de stockage. La méthode de stockage de sessionStorage adopte des méthodes clé et valeur. La valeur de value doit être de type chaîne (la transmission d'une non-chaîne sera également convertie en chaîne une fois stockée. Une valeur vraie sera convertie en "true").

5) Limite de stockage : différents navigateurs ont des limites de stockage différentes, mais la plupart des navigateurs limitent la limite à moins de 5 Mo.

Vous pouvez visiter

http://dev-test.nemikor.com/web-storage/support-test/ pour tester la limite de stockage du navigateur.

1.3 Version minimale du navigateur prise en charge

Version minimale du navigateur prenant en charge sessionStorage : IE8, Chrome 5.

1.4 Scénarios appropriés

sessionStorage est très adapté au SPA (application d'une seule page) et peut facilement transférer des valeurs​​dans chaque module métier.

2. Membre

2.1 Attributs

readonly int sessionStorage.length : renvoie un entier, indiquant le stockage. exister Nombre d'éléments de données (paires clé-valeur) dans l'objet sessionStorage.

Méthode 2.2

string sessionStorage.key(int index) : renvoie le nom de clé du numéro d'index de l'objet sessionStorage actuel. Sinon, retournez null.

chaîne sessionStorage.getItem(string key) : Renvoie la valeur correspondant au nom de la clé. Sinon, retournez null.

void sessionStorage.setItem(string clé, valeur de chaîne) : Cette méthode accepte une clé et une valeur comme paramètres et ajoute la paire clé-valeur au stockage si la clé existe, met à jour sa valeur correspondante ;

void sessionStorage.removeItem(string key) : supprime le nom de clé spécifié (key) de l'objet sessionStorage.

annuler sessionStorage.clear()  : Effacez tous les éléments de l'objet sessionStorage.

3. Exemple

3.1 Stocker les données

3.1.1 Utiliser la méthode setItem() pour stocker

sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值

3.1.2 Stocker via les attributs

sessionStorage['testKey'] = '这是一个测试的value值';

3.2 Lire les données

3.2.1 Obtenir la valeur via la méthode getItem()

sessionStorage.getItem('testKey'); // => 返回testKey对应的值

3.2.2 Obtenir la valeur via l'attribut

sessionStorage['testKey']; // => 这是一个测试的value值

3.3 Stockage des objets Json

sessionStorage peut également stocker des objets Json : lors du stockage, l'objet est converti au format texte via JSON.stringify(); .parse() Renvoie l'objet.

var userEntity = {
    name: 'tom',
    age: 22
};
 
// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userEntity));
 
// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');
userEntity = JSON.parse(userJsonStr);
console.log(userEntity.name); // => tom

Recommandations associées :

sessionStorage stocke les objets json

Utilisez sessionStorage pour enregistrer et obtenir des objets json

Instance de données de stockage local sessionStorage

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!