En raison de la limitation de la taille, du format et du format de données de stockage de l'ère HTML4, si l'application du site Web souhaite stocker une partie des informations sur le navigateur, elle ne peut être utilisée que pour utiliser le cookie. Cependant, ces restrictions de cookies conduisent également à des données simples telles que les cookies ne peuvent stocker que certains identifiants tels que les ID.
Ce qui suit est la restriction des cookies:
La plupart des navigateurs soutiennent le cookie avec un maximum de 4096 octets.
Le navigateur limite également le nombre de cookies stockés sur l'ordinateur utilisateur. La plupart des navigateurs permettent uniquement à chaque site de stocker 20 cookies;
Certains navigateurs effectueront également des restrictions absolues sur le nombre total de cookies qu'ils accepteront sur tous les sites, généralement 300.
La situation par défaut du cookie sera envoyée au serveur d'arrière-plan avec la demande HTTP, mais toutes les demandes ne nécessitent pas de cookies, tels que: JS, CSS, les images et autres demandes ne nécessitent pas de cookie.
Afin de casser une série de restrictions sur les cookies, HTML5 peut directement stocker une grande quantité de données au navigateur client via la nouvelle API de JS et prend en charge des bases de données locales complexes pour rendre JS plus efficace. HTML5 prend en charge deux types de WebStorage:
Il y a deux API stockées dans H5, l'une est le stockage Web, et l'autre est Web SQL. Peu importe lequel est basé sur la langue javascript, je vais vous apprendre à utiliser le stockage Web
3. Storage WebHTML5 définit le stockage local Standard Standard et fournit deux types de stockage d'API: SessionStorage et LocalStorage.
1. LocalStorage a été stocké localement et le stockage de données est permanent. Après la deuxième, la deuxième ou l'année prochaine, les données sont toujours disponibles.Caractéristiques: ① Préservation sûre et permanente dans le domaine. Autrement dit, toutes les pages du même nom de domaine dans le client ou le navigateur peuvent accéder aux données et aux données de LocalStorage sont enregistrées en permanence, sauf pour la suppression, mais les données entre le client ou le navigateur sont indépendantes les unes des autres.
② Les données ne seront pas envoyées au serveur d'arrière-plan avec la demande HTTP;
③ Ne considérez pas la possibilité de données de stockage, car le navigateur est nécessaire pour prendre en charge au moins 4 Mo dans la norme HTML5.
Regardez un exemple:
Le code est le suivant:
Fonction clickCounter () {ifof (typeof (stockage)! == Undefined) {if (localStorage.clickCount) {localStorage.clickCount = numéro (localStorage.cl ickCount) +1;} else {localStorage.ClickCount = 1;} document. GetElementById (result) .InnerHtml = vous avez déjà cliqué sur le bouton + localStorage.ClickCount + Times;} else {document.getElementById (result) .InnerHtml = Désolé, votre navigateur ne prend pas en charge le stockage Web. ;}} </cript> <p> <bouton onClick = clickCounter () type = bouton> Cliquez sur moi! </futton> </p> <div id = result> </div> <p> Cliquez sur le bouton pour afficher l'augmentation du compteur. </p> <p> Éteignez l'onglet (ou fenêtre) du navigateur, rouvrez cette page, le compteur continuera de compter (pas réinitialisé). </p> 2.SessionStorage est efficace pendant la session et les données sont automatiquement supprimées après la fermeture du navigateur;Caractéristiques: Contrôle de session, préservation à court terme. Le concept de session est similaire au concept de session du côté serveur.
compatibilité
Remarque: IE9 LocalStorage ne prend pas en charge les fichiers locaux.
À l'heure actuelle, tous les navigateurs grand public prennent en charge les fonctionnalités de stockage Web de HTML5 dans une certaine mesure. Comme le montre la figure ci-dessus, tous les navigateurs modernes ont pris en charge le stockage Web.
La plate-forme Android et les navigateurs respectifs de la plate-forme iOS prennent essentiellement les caractéristiques de stockage locales du stockage Web. Les appareils mobiles actuels sur le marché, en plus des téléphones Android et de l'iPhone, sont de plus en plus de tablette, et dépendent essentiellement de deux plates-formes. En utilisant le stockage Web sur le terminal mobile, nous n'avons guère besoin de déterminer si le navigateur est pris en charge.
Ce qui suit est la méthode de détection:
if (window.LocalStorage) {// Le navigateur prend en charge localStorage} else {// ne prend pas en charge} if (window.SessionStorage) {// Le navigateur prend en charge sessionstorage} else {// ne prend pas en charge} 3. LocalstorageLocalStorage dans l'API de stockage locale de HTML5 est le même que SessionStorage. Nous prenons un exemple localstorage, introduisons brièvement le stockage local de HTML5, et faisons quelques exemples de problèmes communs tels que la traversée. LocalStorage est une API stockée localement dans HTML5. Différents navigateurs ont un support différent de l'API, tels que les méthodes d'utilisation, l'espace de stockage maximal, etc.
Méthode de stockage: chaîne de stockage de manière clé. Applications principales: paniers d'achat, connexion client, archive de jeu. Essence Essence Types de données réservées: tableau, images, JSON, style, script. Essence Essence (Tant qu'il peut être sérialisé dans un contenu de chaîne, il peut être stocké) Adresse de stockage: C: / Users / 15014 / AppData / Local / Google / Chrome / User Data / User Storage / Local Storage (Différents ordinateurs sont différents, vous devez ouvrir l'affichage du fichier caché, mais vous pouvez trouver ce dossier pour rechercher LocalStorage sur le lecteur C.)LocalStorage fournit quatre méthodes pour nous aider à effectuer des opérations connexes sur le stockage local.
(1) LocalStorage.SetItem (nom de clé, valeur de clé) stocke un type de chaîne de données sur le client local. La valeur de ceci est que la valeur de ceci est que la valeur de ceci est que la valeur du paramètre est que la valeur de celle-ci. comme:
LocalStorage.SetItem (Nom, Zhang SAN); Valeur clé de 28 données.
(2) LocalStorage.getItem (nom de clé) Lisez les données qui ont été stockées dans la zone locale et lisez les données de nom de clé correspondantes via le nom de clé en tant que paramètre. comme:
var data = localStorage.getItem (nom);
(3) LocalStorage.RemoveItem (nom de clé) Supprimez les données qui ont été stockées dans la zone locale et supprimez les données de nom de clé correspondantes via le nom de clé en tant que paramètre. comme:
var data2 = localStorage.RemoveItem (nom);
(4) LocalStorage.Clear () Retirez toutes les données stockées localement. comme:
LocalStorage.Clear () supprime toutes les données stockées localement. Tels que: localStorage.Clear ();
(5) En outre, les quatre fonctions de SessionStorage sont fondamentalement les mêmes que l'utilisation de la fonction de la classe locale-storage ci-dessus, qui ne sera pas expliquée en détail.
Ce qui suit est un petit exemple:
<Script Type = Text / JavaScript> LocalStorage.SetItem (Nom, Zhang SAN); Verify (); .getItem (Age); Type = Type?3. Stratégie d'expiration locale
Étant donné que HTML5 ne définit pas de stratégie d'expiration pour le stockage local, vous pouvez rédiger votre propre programme de stratégie d'expiration lors du traitement de la stratégie d'expiration des données de traitement des données, comme suit:
<! Titre> </ head> <body> </ body> </ html> <cript> Set (key, valeur) {varCurtime = new Date (). : valeur, heure: curtime}); «Résultats: JSON.Parse (Str) Agence d'objet: 23 Nom: Huangxiaojian __Proto__: Remarque Objet: Les citations simples sont écrites sauf {}, chaque nom d'attribut doit être deux citations. JSON.Stringify () est utilisé pour résoudre la chaîne à partir d'un objet, tel que var a = {a: 1, b: 2} Résultat: json.stringify (a) {a: 1, b: 2} * /} fonction get (key, exp) // exp est le temps d'expiration des paramètres {var valeur = localStorage.getItem (key); (Nouvelle date (nouvelle date) () .getTime () -DataObj.time> exp) // Si l'heure actuelle -minus l'élément de stockage défini au moment de la création> EXPIRÉ {console.log (expire); Expiration invite} else {Console.L'opération est comme indiqué dans la figure ci-dessous:
Ce qui précède est tout le contenu de cet article.