Latest web development tutorials

HTML5 stockage Web

stockage Web HTML5, mieux qu'un stockage local des cookies.


Qu'est-ce que HTML5 stockage Web?

Utilisez HTML5 peut parcourir les données stockées localement sur l'utilisateur.

Plus tôt, le stockage local en utilisant des cookies. Mais la sécurité Web et les besoins de stockage plus rapidement. Ces données ne seront pas stockées sur le serveur, mais les données uniquement pour les données demandées par l'utilisateur sur le site. Il peut également stocker de grandes quantités de données sans affecter les performances du site.

Les données sous forme de paires clé / valeur existent, page Web donnée est autorisé à utiliser l'accès Web.


support du navigateur

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 8+, Firefox, Opera, Chrome et Safari support Web Store.

Remarque: Internet Explorer 7 et les versions antérieures de IE ne supportent pas la boutique en ligne.


localStorage et sessionStorage

Deux objets stockés dans les données du client est:

  • localStorage - pas de temps de stockage de données de limite
  • sessionStorage - Stockage de données pour une session de

Avant d'utiliser le stockage Web, vérifiez le soutien du navigateur et localStorage sessionStorage:

if (typeof (Storage)! == "undefined") { // Oui! Objets de soutien localStorage sessionStorage! // Une partie du code ..... } autre { // Désolé! Ne supporte pas la boutique en ligne. }


localStorage Object

Pas de temps objet localStorage de stockage de données de limite. Le lendemain, après la deuxième semaine, ou l'année prochaine, les données sont toujours disponibles.

Exemples

. LocalStorage lastname = "Smith", le document getElementById ( "résultat") innerHTML = "Nom de famille:" ... + localStorage nom;

Essayez »

Des exemples d'analyse:

  • Utilisez la touche = "nom" et value = "Smith" créer une clé de localStorage / paires de valeurs
  • clé de récupération pour la valeur "nom" et insère ensuite id = élément "résultat" dans

Astuce: paires clé / valeur sont généralement stockés sous forme de chaîne, vous pouvez en fonction de leur besoin de convertir le format.

L'exemple suivant montre le nombre de fois qu'un utilisateur clique sur un bouton pour convertir la valeur de chaîne à un type de code numérique:

Exemples

si (LocalStorage. ClickCount) { . LocalStorage clickCount = Nombre (localStorage clickCount .) + 1;} autre { . LocalStorage clickCount = 1;} .. Le document getElementById ( "résultat" ) innerHTML = " Vous avez cliqué sur le bouton" + localStorage clickCount + "fois.";

Essayez »


objets sessionStorage

Procédé sessionStorage pour une session pour le stockage de données. Lorsque l'utilisateur ferme la fenêtre du navigateur, les données seront supprimées.

Comment créer et accéder à un sessionStorage ::

Exemples

si (SessionStorage. ClickCount) { . SessionStorage clickCount = Nombre (sessionStorage clickCount .) + 1;} autre { . SessionStorage clickCount = 1;} .. Le document getElementById ( "résultat" ) innerHTML = " Dans cette conversation que vous avez cliqué sur le bouton" + sessionStorage clickCount + "fois.";

Essayez »