web-dev-qa-db-fra.com

Y at-il des inconvénients à utiliser localStorage au lieu de cookies?

Sur mes sites précédents, j’utilisais un cookie pour afficher une page de pré-accueil uniquement lors de la première visite. Cela a très bien fonctionné ( voir par exemple ici ), mais l’utilisation de cookies n’est pas très à la mode aujourd’hui, je souhaite donc l’éviter autant que possible.

Maintenant, mes nouveaux projets de sites Web ont presque toujours la pré-home lancée via javascript (montrant une modalbox), je n'ai donc aucune action à effectuer du côté serveur. J'envisage d'utiliser HTML5 localStorage au lieu des cookies, avec un repli sur les cookies si le navigateur ne dispose pas de localStorage. Est-ce une bonne idée? Quel est l’impact en termes d’utilisabilité, de protection de la vie privée et de performance du site Web?

L'utilisation de localStorage améliorera la convivialité pour les utilisateurs qui ont désactivé les cookies. Mais je sais que certaines fonctionnalités HTML5 ne sont optionnelles (comme la géolocalisation) que dans certains navigateurs. Existe-t-il une restriction de ce type pour le stockage local sur un navigateur? Existe-t-il des cas dans lesquels une erreur JS se produira si localStorage est disponible mais est désactivé pour mon site?

javascripthtmlhtml5cookieslocal-storage
42
Fabien Quatravaux

Utilisabilité

L'utilisateur ne saura pas si vous utilisez localStorage ou un cookie. Si un utilisateur désactive les cookies, LocalStorage ne fonctionnera pas non plus.

Performance

Il n'y a pas de différence de vitesse notable entre les deux méthodes.

sessionStorage

sessionStorage est uniquement pour la session de cet onglet de navigateur. Si vous fermez l'onglet, la session sera perdue et les données seront également perdues. C'est similaire à une variable de session sur n'importe quelle langue de base.

stockage local

localStorage sera disponible pour n'importe quel onglet ou fenêtre du navigateur et existera jusqu'à ce qu'il soit supprimé par l'utilisateur ou le programme. Contrairement à un cookie, vous ne pouvez pas configurer l'expiration. localStorage a également une limite de stockage beaucoup plus grande.

Vos questions

  1. Vous n'utilisez pas ce côté serveur de données, vous n'avez donc pas besoin de cookie. localStorage n'est jamais envoyé au serveur contrairement à un cookie.
  2. Si l'utilisateur désactive les cookies, localStorage ne fonctionnera pas non plus.

Exemple de repli

Vous pouvez utiliser un Modernizr pour vérifier si localStorage est disponible. Sinon, utilisez plutôt un cookie.

if (Modernizr.localstorage) {
    // supports HTML5 Storage :D
} else {
    // does not support HTML5 Storage :(
}

Vous pouvez également renoncer à Modernizr et utiliser le chèque typeof Storage !== 'undefined'.

69
Vinícius Moraes

Comparer LS et cookies, c'est comparer des pommes à des oranges.

Les cookies et les LS sont des choses complètement différentes pour des buts différents. LS est un outil qui permet à votre client (code javascript) de stocker ses données localement, sans les transmettre au serveur. Cookies est un outil pour la communication client-serveur . L'intégralité des cookies doit être envoyée à chaque demande. 

Dans le passé, les cookies étaient souvent utilisés pour imiter le stockage local, simplement parce que c'était la seule possibilité pour une application javascript d'écrire quoi que ce soit sur le disque dur du client. Mais généralement, LS ne remplace pas les cookies. Par conséquent, si vous avez besoin de quelque chose que le client et le serveur doivent lire et écrire, utilisez des cookies, pas de LS.

27
georg

Un point à ajouter, à la différence du cookie normalement partagé entre protocoles, les stockages restent conformes à la règle de même origine. En conséquence, les sites partagent le même domaine mais hébergés sur un protocole différent ne partagent pas les données stockées.

Dites si votre site Web doit fonctionner sur http et https. Par exemple, lorsque l'utilisateur clique sur le "lien d'achat", il se retrouvera sur la caisse sécurisée https, cette dernière ne pourra pas récupérer les données précédemment stockées sur le site http, même si elles partagent le même domaine.

6
Norman Xu

Il ne semble pas facile pour le serveur de lire le localStorage . Cela peut toutefois s'avérer utile, sachant que vos données concernent uniquement le client, ce qui vous évite de les renifler.

Les cookies ne peuvent pas être écrasés, seulement ajoutés et lus:

alert(document.cookie);
document.cookie = "nope";
alert(document.cookie);
0
Isaac