L'API Web Storage: stockage local et stockage de session

L'API de stockage Web permet de stocker des données dans le navigateur. Il définit deux mécanismes de stockage très importants: le stockage de session et le stockage local, qui font partie de l'ensemble des options de stockage disponibles sur la plate-forme Web

introduction

L'API Web Storage définit deux mécanismes de stockage qui sont très importants:Stockage de sessionetStockage local.

Ils font partie de l'ensemble des options de stockage disponibles sur la plate-forme Web, qui comprend:

Le cache d'application est obsolète et Web SQL n'est pas implémenté dans Firefox, Edge et IE.

Le stockage de session et le stockage local fournissent un espace privé pour vos données. Les données que vous stockez ne sont pas accessibles par d'autres sites Web.

Le stockage de session conserve les données qui y sont stockées pendant la durée de la session de page. Si plusieurs fenêtres ou onglets visitent le même site, ils auront deux instances de stockage de session différentes.

Lorsqu'un onglet / fenêtre est fermé, le stockage de session pour cet onglet / fenêtre particulier est effacé.

Le stockage de session est destiné à permettre le scénario de gestion de différents processus se déroulant sur le même site indépendamment, ce qui n'est pas possible avec les cookies par exemple, qui sont partagés dans toutes les sessions.

Le stockage local conserve les données jusqu'à ce qu'elles soient explicitement supprimées, que ce soit par vous ou par l'utilisateur. Il n'est jamais nettoyé automatiquement et il est partagé dans toutes les sessions qui accèdent à un site.

Le stockage local et le stockage de session sontspécifique au protocole: données stockées lors de l'accès à la page avechttpn'est pas disponible lorsque la page est diffusée avechttps, et vice versa.

Le stockage Web n'est accessible que dans le navigateur. Il n'est pas envoyé au serveur comme le font les cookies.

Comment accéder au stockage

Le stockage local et le stockage de session sont disponibles sur lewindowobjet, afin que vous puissiez y accéder en utilisantsessionStorageetlocalStorage.

Leur ensemble de propriétés et de méthodes est exactement le même, car ils renvoient le même objet, unEspace de rangementobjet.

L'objet de stockage a une seule propriété,length, qui est le nombre d'éléments de données qui y sont stockés.

Méthodes

setItem(key, value)

setItem()ajoute un élément au stockage. Accepte une chaîne comme clé et une chaîne comme valeur:

localStorage.setItem('username', 'flaviocopes')
localStorage.setItem('id', '123')

Si vous transmettez une valeur qui n'est pas une chaîne, elle sera convertie en chaîne:

localStorage.setItem('test', 123) //stored as the '123' string
localStorage.setItem('test', { test: 1 }) //stored as "[object Object]"

getItem(key)

getItem()est le moyen de récupérer une valeur de chaîne à partir du stockage, en utilisant la chaîne de clé qui a été utilisée pour la stocker:

localStorage.getItem('username') // 'flaviocopes'
localStorage.getItem('id') // '123'

removeItem(key)

removeItem()supprime l'élément identifié parkeydu stockage, ne renvoyant rien (unundefinedévaluer):

localStorage.removeItem('id')

key(n)

Chaque article que vous stockez a un numéro d'index.

Il peut sembler que le nombre est consécutif, donc la première fois que vous utilisezsetItem(), cet élément peut être référencé en utilisantkey(0), le suivant aveckey(1)et ainsi de suite, mais ce n'est pas le cas. MDN dit: «L'ordre des clés est défini par l'agent utilisateur, vous ne devriez donc pas vous y fier».

Si vous référencez un nombre qui ne pointe pas vers un élément de stockage, il renvoienull.

clear()

clear()supprime tout de l'objet de stockage que vous manipulez:

localStorage.setItem('a', 'a')
localStorage.setItem('b', 'b')
localStorage.length //2
localStorage.clear()
localStorage.length //0

Limites de taille de stockage

Grâce à l'API de stockage, vous pouvez stocker beaucoup plus de données que vous ne le pourriez avec les cookies.

La quantité de stockage disponible sur le Web peut différer selon le type de stockage (local ou session), le navigateur et le type de périphérique. UNErechercherby html5rocks.com souligne ces limites:

Bureau

  • Chrome, IE, Firefox: 10 Mo
  • Safari: 5 Mo pour le stockage local, stockage de session illimité

Mobile

  • Chrome, Firefox: 10 Mo
  • iOS Safari et WebView: 5 Mo pour le stockage local, stockage de session illimité sauf dans iOS6 et iOS7 où il est de 5 Mo
  • Navigateur Android: stockage local de 2 Mo, stockage de session illimité

Dépasser le quota

Vous devez gérer les erreurs de quota, en particulier si vous stockez beaucoup de données. Vous pouvez le faire avec un try / catch:

try {
  localStorage.setItem('key', 'value')
} catch (domException) {
  if (
    ['QuotaExceededError', 'NS_ERROR_DOM_QUOTA_REACHED'].includes(
      domException.name
    )
  ) {
    // handle quota limit exceeded error
  }
}

Outils de développement

Les DevTools des principaux navigateurs offrent tous une interface agréable pour inspecter et manipuler les données stockées dans le stockage local et de session.

Chrome

Chrome DevTools local storage

Firefox

Firefox DevTools local storage

Safari

Safari DevTools local storage

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de didacticiels sur le navigateur: