Analyse spécifique de localStorage et sessionStorage du stockage local HTML5

1. Présentation

LocalStorage et sessionStorage sont collectivement appelés Web Storage, ce qui permet aux pages Web de stocker des données côté navigateur.

Les données enregistrées par sessionStorage sont utilisées pour une session du navigateur. Lorsque la session se termine (généralement la fenêtre est fermée), les données enregistrées par localStorage existent pendant une longue période. Chaque fois que vous visitez le site Web, la page Web peut lire directement les données précédemment enregistrées. Hormis les périodes de stockage différentes, les propriétés et méthodes de ces deux objets sont exactement les mêmes.

Ils ressemblent beaucoup à une version améliorée du mécanisme de cookie, capable d'utiliser un espace de stockage beaucoup plus grand. Actuellement, la limite de stockage par domaine dépend du navigateur et est de 2,5 Mo pour Chrome, 5 Mo pour Firefox et Opera et 10 Mo pour IE. Parmi eux, l'espace de stockage de Firefox est déterminé par le nom de domaine de premier niveau, alors que les autres navigateurs n'ont pas cette limitation. Autrement dit, dans Firefox, a.example.com et b.example partagent 5 Mo d'espace de stockage. De plus, comme les cookies, ils sont également soumis aux mêmes restrictions de domaine. Les données stockées dans une page Web ne peuvent être lues que par les pages Web du même domaine.

En vérifiant si l'objet window contient les attributs sessionStorage et localStorage, vous pouvez déterminer si le navigateur prend en charge ces deux objets.

function checkStorageSupport() {    
var result = {};    
//sessionStorage
    if (window.sessionStorage) {
        result.sessionStorage = true;
    } else {
        result.sessionStorage = false;
    }    //localStorage
    if (window.localStorage) {
        result.localStorage = true;
    } else {
        result.localStorage = false;
    }    return result;

}

2. Méthode de fonctionnement

2.1 Sauvegarde/lecture des données

Les données enregistrées par sessionStorage et localStorage existent sous forme de "paires clé-valeur". En d’autres termes, chaque élément de données possède un nom de clé et une valeur correspondante. Toutes les données sont enregistrées au format texte.

Utilisez la méthode setItem pour stocker les données. Il accepte deux paramètres, le premier est le nom de la clé et le second les données enregistrées.

sessionStorage.setItem('key', 'value');

localStorage.setTime('key', 'value');

Lire les données à l'aide de la méthode getItem. Il n'a qu'un seul paramètre, qui est le nom de la clé.

var valueSession = sessionStorage.getItem('key');var valueLocal = localStorage.getItem('key');

2.2 Effacer les données

La méthode RemoveItem est utilisée pour effacer les données correspondant à un certain nom de clé. La méthode

sessionStorage.removeItem('key');

localStorage.removeItem('key');

clear est utilisée pour effacer toutes les données enregistrées.

sessionStorage.clear();

localStorage.clear();

2.3 Opération de traversée

En utilisant l'attribut length et la méthode key, toutes les clés peuvent être parcourues.

for (var i = 0; i < localStorage.length; i++) {
    console.log(localStorage.key(i));
}

La méthode clé obtient la valeur clé en fonction de la position (en partant de 0).

localStorage.key(1);

3. événement de stockage

Lorsque les données stockées changent, l'événement de stockage sera déclenché. Nous pouvons spécifier la fonction de rappel pour cet événement.

window.addEventListener('storage', onStorageChange);

La fonction de rappel accepte un objet événement comme paramètre. L'attribut key de cet objet événement enregistre le nom de clé modifié.

function onStorageChange(e) {
    console.log(e.key);
}

En plus de l'attribut key, l'objet événement possède trois attributs :

oldValue : la valeur avant mise à jour. Si la clé est nouvellement ajoutée, cet attribut est nul.

newValue : valeur mise à jour. Si la clé a été supprimée, cette propriété est nulle.

url : L'URL de la page Web qui a initialement déclenché l'événement de stockage.

Il est à noter que cet événement n'est pas déclenché sur la page actuelle, ce qui entraîne la modification des données. Si le navigateur ouvre plusieurs pages sous un nom de domaine en même temps, lorsqu'une des pages modifie les données de sessionStorage ou localStorage, les événements de stockage de toutes les autres pages seront déclenchés et l'événement de stockage ne sera pas déclenché par l'original. page. Grâce à ce mécanisme, la communication entre plusieurs fenêtres peut être réalisée. Parmi tous les navigateurs, à l'exception d'IE, cela déclenchera l'événement de stockage sur toutes les pages.

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!