Le LocalStorage en HTML5

a marqué ce sujet comme résolu.

Tout le monde se secoue ! :D

J'ai commencé (il y a 32 minutes) la rédaction d'un tutoriel au doux nom de « Le LocalStorage en HTML5 » et j'ai dans l'objectif de proposer en validation un texte aux petits oignons. Je fais donc appel à votre bonté sans limite pour dénicher le moindre pépin, que ce soit à propos du fond ou de la forme. Vous pourrez consulter la bêta à votre guise à l'adresse suivante :

Merci !

EDIT: Il est priceless ce message :D bravo à celui qui l'a rédigé.

Je suis conscient qu'il y a surement beaucoup de chose à modifier améliorer et de fautes à corriger. C'est la première fois que j'écris un article autre qu'un step by step et c'est totalement différent car il faut expliquer comment fonctionne quelque chose au lieu de simplement dire "Fait ci, Fait ça". C'est pour cela que j'ai choisi un petit sujet comme celui-ci, histoire de voir si j'étais capable d'écrire quelque chose de correct ou pas :)

+2 -0

Salut,

L'introduction du tutoriel (pas la première section) n'est pas très explicite sur ce qu'est le LocalStorage. Peut-être pourrais-tu y intégrer la première section, quitte à raccourcir un peu cette dernière en revoyant la forme ? Autrement dit, l'introduction serait, dans les grandes lignes :

  • HTML5 => plein de trucs chouettes
  • Dont le LocalStorage
  • En bref, le LocalStorage c'est…
  • Il a été introduit pour pallier aux limitations des cookies et des sessions
  • Dans ce tutoriel, on va apprendre à utiliser son PI
  • Pour le suivre, il vous faudra… (pré-requis : bases en HTML et JS)

Sinon, peut-être pourrais-tu ajouter une partie sur la compatibilité avec les navigateurs ? :)

Merci.

+0 -0

Concernant la compatibilité avec les navigateurs c'est vraiment utile ? Mis a part Internet 7 et - tous le supportes. Je suis partisan du "On arrête de supporter les vieux navigateurs et tampis pour ceux qui veulent pas update leurs système ^^"

Concernant l'introduction si j'ai bien compris tu parles du premier paragraphe de 4 lignes et pas de la section "Introduction" c'est bien cela ?

+1 -0

Mis a part Internet 7 et - tous le supportes.

Dans ce cas-là, c'est bon. :)

Edit : quoique, peut-être ajouter un mot là-dessus. Un truc du genre : "Cette nouveauté est supportée par tous les navigateurs un tant soit peu récents". Je me dis en effet que si je me suis posé la question de la compatibilité, d'autres risquent de le faire.

Concernant l'introduction si j'ai bien compris tu parles du premier paragraphe de 4 lignes et pas de la section "Introduction" c'est bien cela ?

Ouep.

+0 -0

Voila j'ai apporté quelques modif, apparemment je dois (re)publier si vous voulez voir les modifications, je vais attendre cette aprem' histoire de modifier la première section vu que pas mal d'info sont passe juste au dessus.

Nouvelle intro

Le HTML5 a apporté sont lot de nouveautés toutes plus intéressantes les unes que les autres. De nouvelles balises pour nos pages, du multimédia avec les balises video et audio (adieu les players flash beaucoup trop lourd), les formulaires ont également eux leurs nouveautés avec de nouveaux champs, de nouveau attributs mais aussi avec une API complète utilisable simplement en javascript pour travailler avec toutes ces nouveautés.

Parmi toutes ces nouveautés il y en a une en particulier qui nous intéresse aujourd'hui, il s'agit du localStorage.

Vous pouvez de temps en temps rencontrer le terme Dom Storage ou Web Storage, il s'agit de la famille a laquel appartient de localStorage et son cousin le sessionStorage.

Le localStorage permet de stocker des données de manière simple est efficace directement dans le navigateur du client.

Mais pourquoi devrais-je utiliser le localstorage, j'ai les cookies ou les sessions pour enregistrer rapidement des informations.

C'est la que le localStorage prend tout son sens, il permet de stocker plus de donnée, d'y accéder plus simplement sans faire appel au serveur qui gère votre application et a plus grosse échelle il permet même de faire des applications web disponible en mode "hors-ligne".

Les cookies sont limités en taille (poids) et en nombre, cela dépend de votre configuration serveur, à contrario le localStorage permet lui de stocker un nombre illimité d'information, peut importe leurs tailles et leurs nombres.

Il est aussi important de noté que le localStorage n'est pas vidé une fois le navigateur fermé, la connexion couper contrairement aux sessions classique ou au sessionStorage et c'est ce qui fait sa force.

Dans ce tutoriel nous allons utiliser pas mal de javascript, vous n'avez pas besoin d'être un ninja du JS mais avoir de bonnes bases et connaître les fonctionnements basique du langage. Nous utiliserons également du HTML & CSS (évidement).

À la fin de ce tutoriel vous serez capable de réaliser des applications fonctionnant hors-ligne, de sauvegarder des formulaires afin de ne pas perdre la saisie en cas de crash du navigateur ou de perte de connexion.

Bonne lecture à tous

+0 -0

Bien joué, c'est beaucoup mieux ! Quelques petites remarques :

à contrario le localStorage permet lui de stocker un nombre illimité d'information, peut importe leurs tailles et leurs nombres

Illimité, vraiment ?

Nous utiliserons également du HTML & CSS (évidement).

Certes les deux vont de pair, mais CSS est-il nécessaire à ce tutoriel ?

+0 -0

Pas vraiment illimité, mais avant d'avoir 10Mb de donnée enregistré la dedans il faut y aller. Il n'y a pas réellement d'info la dessus d'ailleurs.

Concernant le CSS non il n'est pas nécessaire, mais je préfère de loin perdre 5 minutes a taper ~100 lignes de css pour avoir quelque chose de structurer et de propre plutôt que de travailler sur un document qui n'est pas construit avec les elems qui font ce qu'ils veulent ^^

Après le seul CSS utilisé je le donne dans le code html, c'est juste pour centrer le formulaire dans la partie événement.

EDIT: Après quelques recherche le localStorage est bien en illimité mais la plus part des navigateurs bloque a un certain niveau pour éviter de remplir le disque dur du client a son insu.

+0 -0

Petite question, je voulais proposer une suggestion pour l'ajout d'un "widget" pour codepen dans l'éditeur de tutoriel mais j'ai remarqué que dans le tuto sur la vidéo linké plus haut il y a des exemples avec jsFiddle.

Dans le tutoriel de rédaction des tutoriels il n'y a rien à propos de ça, c'est toujours disponible ou vous l'avez supprimé?

+0 -0

CodePen refusé pour le moment, c'est ce que j'avais proposé en interne. C'est tjs une fonctionnalité en test.

Une remarque toutefois concernant l'intro. J'avais pas vu ce topic, et j'ai conseillé de la raccourcir. La je vois que Vayel a donné le conseil inverse ^^ . L'intro d'un tuto doit être courte et exhaustive. Nul besoin d'entrer dans les détails, il s'agit juste d'attirer et de susciter l'intérêt des lecteurs (c'est du racolage :p ). Un ou deux paragraphes d'accroche, un autre pour les prérequis à la lecture du tuto et l'une ou l'autre recommandation et c'est largement suffisant :) . Faut pas faire peur dès le début avec 3 tonnes de texte.

+0 -0
Ce sujet est verrouillé.