Recherche un cours, tutorial , bonnes pratiques sur localStorage

bonjour,

j'ai découvert la fonctionnalité de localStorage , c'est hyper pratique.

j'en avais besoin pour mémoriser et restaurer l'onglet actif d'une page à l'autre ou en reload de la page.
Grâce à ce tuto, j'ai découvert la notion LocalStorage !
https://www.tutorialrepublic.com/faq...-bootstrap.php

En voyant ça, je me suis tout de suite dit que ça va me servir à faire en javascript ce que je fais en PHP avec $_SESSION, je vois directement les mêmes opportunités d'utilisation !
J'ai plein de questions qui me viennent à l'esprit...
Je me demande depuis combien de temps ça existe et pour quel navigateur ou quel OS...
Est-ce dangereux, crypté, limité en taille de stockage...etc
pourquoi utiliser le localStorage plutôt qu'un cookie ou inversement....
J'ai vu dans le F12 qu'on peut modifier à la voler un item, donc ya un risque de produire un bug ou faille de sécurité ? Par contre c'est dommage, il n'y a pas de date de création des items, ni une colonne taille...
J'ai commencé à espionner/regarder par curiorisé ce que les autres sites internet mettent dans localStorage , j'ai vu des requêtes SQL... je trouve ça dangereux... ya un risque de passer un mdp ou login...

Du coup, je cherche maintenant un cours, un tuto, les bonnes pratiques et choses dangereuses à faire ou éviter. Si vous avez une idée de bonne lecture...?
Si vous avez une liste d'exemple d'utilisation ou d'opportunité de localStorage pour un site web, ça m'interre aussi. je vois que certains l'utilise pour un panier au lieu de faire ça avec un cookie!

ca existe depuis 2010, et c'est supporte par tous les navigateurs

le cookie va etre envoye au serveur (qui pourra le lire)
le localstorage, comme son nom l'indique, c'est du storage local (sur la machine cliente)

le localstorage, est persistant dans le temps (tant qu'on ne le supprime pas), et il existe aussi le sessionstorage, qui est detruit quand on ferme la session du navigateur
les 2 sont lies au domaine : le domaine exemple1.com ne pourra pas lire le storage du domaine test.com

a note que tu ne peux stocker QUE des strings. et que JSON.parse() et JSON.stringnify() deviendront tes meilleurs amis ;) (pour stocker & recuperer des objects)

l'utilisation est la meme que pour les cookies, juste que tu peux y stocker plus de donnes que le cookies
=> comme pour les cookies, il ne faut pas stocker de donnees sensibles, car tout est lisible/accessible par l'utilisateur

tu peux t'amuser a changer les valeures, effectivement... mais si le script qui l'utliise plante, tant pis pour toi.

il faut utiliser le localstorage pour "ameliorer" la qualite de navigation du client, et en aucun cas, tout baser la dessus ! (justement parce que l'utilisateur peu le modifier)
par exemple, stocker le theme que l'utilisateur a choisis

comme pour n'importe quel script. si ca provient de l'utilisateur, il ne faut en aucun cas lui faire confiance, et faire des verifications quand meme ;)

a part 4 methodes, t'as rien besoin d'autre...

Code:

---

1 2 3 4

localStorage.setItem("uneCle", "toto"); localStorage.getItem("uneCle"); localStorage.removeItem("uneCle"); localStorage.clear(); // supprime tout

---

bonjour,

merci pour la réponse.
j'ai une question toute bête : vu que c'est stocké en local, quand je ferai une exécution de lecteur/écrite, il y a un délai avant erreur ?
par exemple, si je fais localStorage.getItem("uneCle") et que le disque dur du client est indisponible, il se passe quoi ? le site est en pause et le visiteur attend devant sans rien pouvoir y faire ? il n'y a pas de gestion d'exception,delay ou erreur i/o ?

c'est du string Ok, on peut y mettre tout type de codage ? ut8mb4 ? on peut donc y stocker une image en base64

Citation:

---

Envoyé par clavier12AZQSWX

on peut y mettre tout type de codage

---

=> UTF-16

Citation:

---

Envoyé par clavier12AZQSWX

on peut donc y stocker une image en base64

---

oui, mais pas sur que ce soit la meilleur idee, si t'as beaucoup de medias a stocker

a noter que c'est synchrone : si t'as des milliers de clefs, ton script sera ralenti le temps qu'il recupere la data
=> par contre, si le disque dur est "indisponible"... je ne sais pas ce qu'il se passera : jamais rencontre un disque dur "indisponible"

si la clef n'existe pas, il retournera null

Citation:

---

Envoyé par clavier12AZQSWX

il se passe quoi ? le site est en pause et le visiteur attend devant sans rien pouvoir y faire ?

---

=> theoriquement, non... vu que ton site doit fonctionner sans ;) (ne serai-ce que la 1ere fois que l'utilisateur arrive sur le site... il n'a rien en local encore)

une dernière question :

si l'utilisateur désactive les cookies et tout stockage (ou mode privé), je suppose donc qu'on ne peut pas stocker/lire de localstorage ?

Plus haut je posais la question "si le disque dur est HS" en fait , j'avais plutôt en tête "si le disque est lent..", est-ce qu'après 3s on peut récupérer la main ou bien faut vraiment attendre la fin de la lecture sans laisser l'utilisateur béa devant son écran...

meme cookies desactives, tu peux acceder au localstorage

la navigation privee fonctionne comme les cookies (de ce que je constate)
=> t'as rien en nav privee.

pour la recup de datas du storage, on parle en milisecondes...

au pire, tu peux te faire une function asynchrone pour recuperer la data du storage...

Code:

---

1 2 3 4 5 6 7

function getLocalStorage(key) { return new Promise(res => { res(localStorage.getItem(key)); }); }   getLocalStorage('uneClef').then(data => { console.log(data); });

---