Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 Menu HTML 5  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7  - Cours 8  - cours 9 
 Menu cours 5 HTML 5  - localStorage  - sessionStorage  / stockage  - lecture  - suppression  - suppression totale 
-  ➽ ➽ ➽    utilisation de localStorage 



Cours 5 HTML 5 avec LigneWeb
le stockage de données.



 © LigneWeb  ... /HTML 5 : localStorage - sessionStorage.
© design : LigneWeb
© : alain jean deligne - LigneWeb



Cette page est réalisée en XHTML 1.0 transitionnel avec du CSS 2 et du CSS 3 ...
Cette page va être réalisée en parallèlle en HTML 5 et CSS 3 prochainement ...



Le logo de LigneWeb

Le stockage de données :


Suivez-nous.







➽ ➽ ➽    Vous avez vu cette page 0 fois.    [utilisation de localStorage]  (*) 

... pour réinitialiser le localStorage ... voir le détail ... :


Initialisation du localStorage


... la prochaine fois, le compteur sera remis à ... "1" ...
... il faut être venu plusieurs fois sur cette page évidemment ...
... ce n'est pas inscrit dans un cookies ... mais sur votre ordinateur ...





Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




Qu'est-ce que le stockage de données ?


… c'est un ...  stockage de données  ..., par exemple, du nombre de visite que vous faites, ...
... ou d'un ensemble de données plus volumineuses ...  sur votre ordinateur  ...
... pour une page donnée ou un ensemble de pages ...
... cette information est stockée dans une mémoire sur votre ordinateur ...
... et n'est disponible que pour vous ...
... cette information n'est donc pas stockée sur le serveur ...
... ce qui augmente la sécurité ... et la vitesse de traitement ...
... libérant par là-même la liaison http ... le serveur lui n'est pas concerné par cette action ...
... comme la mémoire est plus importante, ...
... on peut mémoriser plus de données que ne le permettait les cookies ...

… un exemple simple sera de compter le nombre de fois que vous venez sur une page d'un site … un compteur de visites ...
… ce qui permettra de compter les pages les plus vues ( votre intérêt ) …
… avec une limite : un site web ne peut accéder lui-même aux données stockées … ( votre protection ) …
… et ces données peuvent être effacées ...

… deux sortes de stockage existent …
… le premier, appelé … localStorage … permet un … stockage à long terme ... sur votre ordinateur …
… le deuxième, appelé …sessionStorage … permet un stockage … le temps de votre visite
… ce deuxième s'efface automatiquement à la fin de la session ...

… le cookie restera pour des données sensibles comme un mot de passe …
... le cookie est différent du Storage ... aucune interaction entre eux ...




Le localStorage :

Un exemple :

… un script permettant de retenir votre nom à long terme ...


… c'est avec ce nom que vous serez acceuilli sur la page web d'un site que vous fréquenté souvent ...

Un deuxième exemple :

… un compteur de visite d'une page web ...


… ce comptage perdure dans le temps … ce qui permet de voir votre visite à long terme ...

(*)    Un troisième exemple concret :

exemple sur cette page au dessus de la recherche ...

... on peut le voir dans le localStorage grâce aux outils donnés par les navigateurs ...
... et dans ce cas concret, uniquement  sur cette page  pour ce site web ...




Le sessionStorage :

Un exemple :

… un script permettant de retenir votre nom à court terme, le temps de la session ...


… pour savoir combien de fois vous êtes passé par cette page …

Un deuxième exemple :

… un compteur de visite d'une page web pendant la session...


… ce comptage ne perdure pas dans le temps … il s'arrête à la fin de la session … ( fermeture de votre navigateur ) …




Remarques :


... il est important de préciser dès le début que tout navigateur ne peut lire tout le HTML 5 ...

... JavaScript propose des alternatives pour les anciens navigateurs ... avec les cookies, etc ...
... mais ces techniques connues ... sont limitées dans la capacité de stockage ...
... cette capacité va être augmentée légèrement avec la nouvelle norme HTTP/2 actuelle ...
... il y a en préparation la dernière norme, le HTTP/3 ...

Les applications du storage.

… les applications du storage sont multiples et variées …
… comme cela consiste à stocker des données sur l'ordinateur client et non sur le serveur … cela facilite le travail …
… nous avons vu que le coockie faisait la même chose … sauf que la mémoire est ultra petite …
… pouvant intégrer plus de donnée, … il devient possible d'effectuer des applications plus complexes …

… on peut lire des données qui devrons être traduites en chaîne de caractère pour les stocker …
… on peut lire dans la mémoire de stockage …
… on peut restituer ses données …
… on peut mesurer le remplissage de la mémoire …
… on peut effacer cette mémoire … pour celle qui reste plus longtemps ...

… et on utilise essentiellement JavaScript pour réaliser ces applications …
… cela demande de pouvoir développer des applications actuellement ...



L'interface Storage :

Le stockage :

… le stockage se fait grâce à … setItem(...) … tant pour le …
… stockade local … que pour le … stockage de session …

setItem ... est constitué de deux mots …  set  … et …
...  Item  … avec une majuscule … écrit en un seul mot …

… mise en mémoire pour le stockage de session ...

... sessionStrorage … est également construit avec deux mots dont le deuxième s'écrit avec une majuscule ...

… mise en mémoire pour le stockage local ...



La lecture avec affichage :

… la lecture se fait grâce à … getItem(...) … tant pour le …
… stockade local … que pour le … stockage de session …

getItem ... est constitué de deux mots …  get  … et …
...  Item  … avec une majuscule … écrit en un seul mot …

… lecture de la clef pour le stockage de session ...

… affichage de la clef pour le stockage de session ...

… mise en mémoire pour le stockage local ...

… affichage de la date pour le stockage local ...



La suppression de l'élément mémorisé :

… la suppression se fait grâce à … removeItem(...) … tant pour le …
… stockade local … que pour le … stockage de session …

removeItem ... est constitué de deux mots …  remove  … et …
...  Item  … avec une majuscule … écrit en un seul mot …

… suppression de la clef pour le stockage de session ...

… suppression de la clef pour le stockage local ...




La suppression totale :

… la suppression totale se fait grâce à … clear(...) … tant pour le …
… stockade local … que pour le … stockage de session …

… suppression totale de la clef pour le stockage de session ...

… suppression totale de la clef pour le stockage local ...

il faut tenir compte pour l'utilisation du stockage que tous les navigateurs anciens ne peuvent lire ces balises

... nous verrons l'utilisation d'une ...  bibliothèque JQuery  ... une façon plus simple d'écrire du JavaScript ...
... un langage de programmation qui s'effectue sur l'ordinateur ...
... ce qui permet plus simplement de faire un site dynamique ...
... on peut déjà approcher ces notions en voyant ...  les sites et livres proposés  ...

... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple





 Menu HTML 5  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7  - Cours 8  - cours 9 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours XHTML  - Cours CSS 2  - Création site  - Cours  HTML 5  - Cours CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies