Stockage local HTML5 vs stockage de session

563

En plus d'être non persistant et limité à la fenêtre actuelle, y a-t-il des avantages (performances, accès aux données, etc.) au stockage de session par rapport au stockage local?

jpkeisala
la source
15
@robert - Je pense que vous vous trompez. Depuis w3.org/TR/webstorage sessionStorage est étendu au "contexte de navigation de niveau supérieur", ce qui signifie qu'il est unique pour chaque onglet / fenêtre de navigateur. localStorage est limité à l'origine, ce qui signifie qu'il est partagé sur toutes les pages de la même origine.
broofa
5
Re: Performance jsperf.com/localstorage-vs-sessionstorage
colllin

Réponses:

814

localStorage et sessionStorage étendent tous deux le stockage . Il n'y a aucune différence entre eux sauf pour la "non-persistance" voulue de sessionStorage.

Autrement dit, les données stockées dans localStorage persistent jusqu'à ce qu'elles soient explicitement supprimées . Les modifications apportées sont enregistrées et disponibles pour toutes les visites actuelles et futures du site.

Pour sessionStorage, les modifications ne sont disponibles que par onglet. Les modifications apportées sont enregistrées et disponibles pour la page en cours dans cet onglet jusqu'à sa fermeture. Une fois fermé, les données stockées sont supprimées.

tcooc
la source
17
il y a une discussion plus large que vous pouvez trouver utile ici: stackoverflow.com/questions/19867599/…
Ed Sykes
13
si vous enregistrez des données en stockage sous http, vous ne pourrez pas les récupérer sur https
Mark Thien
J'ai testé cela sur Chrome v41.x et il semble que la déclaration ci-dessus sur https ne soit pas vraie: localStorage conserve ses données stockées.
CCC
36
SessionStorage survit malgré les rechargements et les restaurations de pages, mais l'ouverture d'un nouvel onglet / fenêtre lancera une nouvelle session.
Patrick
160

La seule différence est que localStorage a une heure d'expiration différente, sessionStoragene sera accessible que pendant et par la fenêtre qui l'a créé est ouverte.
localStoragedure jusqu'à ce que vous le supprimiez ou que l'utilisateur le supprime.
Disons que vous vouliez enregistrer un nom d' utilisateur et mot de passe que vous souhaitez utiliser sessionStorageplus localStoragepour des raisons de sécurité (ie. Une autre personne accédant à leur compte à une date ultérieure).
Mais si vous souhaitez enregistrer les paramètres d'un utilisateur sur sa machine, vous le voudrez probablement localStorage. En tout:

localStorage- utiliser pour une utilisation à long terme.
sessionStorage- à utiliser lorsque vous avez besoin de stocker quelque chose qui change ou quelque chose de temporaire

MayorMonty
la source
103

Peu d'autres points qui pourraient être utiles pour comprendre les différences entre le stockage local et le stockage de session

  1. Le stockage local et le stockage de session sont limités à l'origine du document, donc

    https://mydomain.com/
    http://mydomain.com/
    https://mydomain.com:8080/

    Toutes les URL ci-dessus ne partageront pas le même stockage. (Le chemin de notification de la page Web n'affecte pas le stockage Web)

  2. Le stockage de session est différent même pour le document avec la même stratégie d'origine ouverte dans différents onglets, donc la même page Web ouverte dans deux onglets différents ne peut pas partager le même stockage de session.

  3. Le stockage local et le stockage de session sont également limités par les fournisseurs de navigateurs . Les données de stockage enregistrées par IE ne peuvent donc pas être lues par Chrome ou FF.

J'espère que cela t'aides.

fonctionnoid
la source
3
Non, le même partage sessionStorage entre http et https mais pas localStorage.
Shahdat
5
Si vous définissez d'abord sessionStorage en origine https, il sera disponible dans http mais si vous créez sessionStore dans http, il ne sera pas disponible dans http
Shahdat
4
@Shahdat, vouliez-vous dire "alors ne sera pas disponible dans https" (notez les)?
Daniel Werner
3
@DanielWerner oui, si vous créez sessionStore dans http, alors il ne sera pas disponible dans https.
Shahdat
28

La principale différence entre localStorageet sessionStorageest qu'elle sessionStorageest unique par onglet. Si vous fermez l'onglet, le sessionStorageest supprimé, localStoragenon. De plus, vous ne pouvez pas communiquer entre les onglets :)

Une autre différence subtile est que, par exemple, sur Safari (8.0.3) localStoragea une limite de 2551 k caractères mais sessionStoragea un stockage illimité

Sur Chrome (v43) les deux localStorageet sessionStoragesont limités à 5101 k caractères (pas de différence entre le mode normal / incognito)

Sur Firefox les deux localStorageet sessionStoragesont limités à 5120 k caractères (pas de différence entre le mode normal / privé)

Aucune différence de vitesse que ce soit :)

Il y a aussi un problème avec Mobile Safari et Mobile Chrome, Safari en mode privé et Chrome ont un espace maximum de 0 Ko

Eek
la source
1
limité à 5101 k caractères? alors .. 5.101 millions de caractères?
Zze
@Zze Oui, 1 caractère équivaut généralement à 1 octet, donc 5 millions de caractères représentent 5 Mo d'espace de stockage.
Basim Khajwal
@BasimKhajwal Soit 5 Mo. Octets, pas bits.
Yeti
Pouvez-vous ajouter une source à ce que vous avez mentionné?
Mukus
@Mukus, il n'y a pas de source, j'ai moi-même effectué des tests et j'ai eu un problème avec Private Mode Safari pour avoir localStorage mais n'ayant pas d'espace là-bas et mon polyfill ne se déclencherait pas depuis que localStorage existait, mais le script a échoué car il ne pouvait pas stocker rien là-bas. Vous pouvez également tester en utilisant cet outil - dev-test.nemikor.com/web-storage/support-test
Eek
17

sessionStorageest identique à localStorage, sauf qu'il stocke les données pour une seule session, et il sera supprimé lorsque l'utilisateur fermera la fenêtre du navigateur qui les a créées.

Ahmad Santarissy
la source
10

en termes de performances, mes mesures (brutes) n'ont trouvé aucune différence sur 1000 écritures et lectures

en termes de sécurité, il semblerait intuitivement que le localStore soit fermé avant le sessionStore, mais n'a aucune preuve concrète - peut-être que quelqu'un d'autre le fait?

fonctionnel, d'accord avec digitalFresh ci-dessus

cc jeune
la source
1
concernant les performances de chargement de page: sessionStorage et localStorage sont tous deux lancés et remplis hors du cycle de chargement de page-rendu. Par conséquent, le péage sur le temps de chargement de la page initiale n'est pas mesurable à partir du navigateur.
Mirko
6

Le stockage de session Ya et le stockage local ont le même comportement, sauf celui qui est le stockage local stockera les données jusqu'à ce que et à moins que l'utilisateur ne supprime le cache et les cookies et les données de stockage de session ne restent dans le système jusqu'à ce que nous fermions la session i, e jusqu'à ce que nous fermions la fenêtre de stockage de session créée.

Bhargavi
la source
5

À mon avis, l'avantage du stockage de session sur le stockage local est qu'il a une capacité illimitée dans Firefox et ne persistera pas plus longtemps que la session. (Bien sûr, cela dépend de votre objectif.)

avvett
la source
2

Stockage local: il conserve les données d'informations utilisateur sans date d'expiration, ces données ne seront pas supprimées lorsque l'utilisateur fermera les fenêtres du navigateur, elles seront disponibles pour le jour, la semaine, le mois et l'année.

//Set the value in a local storage object
localStorage.setItem('name', myName);

//Get the value from storage object
localStorage.getItem('name');

//Delete the value from local storage object
localStorage.removeItem(name);//Delete specifice obeject from local storege
localStorage.clear();//Delete all from local storege

Stockage de session: c'est la même chose que la date de stockage local, sauf qu'il supprimera toutes les fenêtres lorsque les fenêtres du navigateur seront fermées par un utilisateur Web.

//set the value to a object in session storege
sessionStorage.myNameInSession = "Krishna";

En savoir plus Cliquez

Srikrushna
la source
2
  • sessionStorage maintient une zone de stockage distincte pour chaque origine donnée qui est disponible pour la durée de la session de page (tant que le navigateur est ouvert, y compris les rechargements et les restaurations de page)

  • localStorage fait la même chose, mais persiste même lorsque le navigateur est fermé et rouvert.

J'ai pris cela de https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

Linda Gutiérrez Montoya
la source