communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > Tutoriel sur l'utilisation de Localstorage dans les compétences du didacticiel HTML5_html5

Tutoriel sur l'utilisation de Localstorage dans les compétences du didacticiel HTML5_html5

WBOY
Libérer： 2016-05-16 15:46:27
original
1661 Les gens l'ont consulté

Qu'est-ce que le stockage local

Il y a quelques jours, j'ai trouvé que le fonctionnement des cookies était très étrange dans un ancien projet. Après consultation, j'ai souhaité mettre en cache certaines informations pour éviter de passer des paramètres sur l'URL, mais je n'ai pas envisagé les problèmes que poseraient les cookies. cause :

　① La taille des cookies est limitée à environ 4 Ko, ce qui n'est pas adapté au stockage de données professionnelles
　② Les cookies sont envoyés à chaque fois avec des transactions HTTP, ce qui gaspille de la bande passante

Nous réalisons des projets mobiles, donc la technologie qui est vraiment appropriée à utiliser ici est le stockage local. On peut dire que le stockage local est une optimisation des cookies. Il peut être utilisé pour stocker facilement des données sur le client et ne sera pas transmis avec. HTTP, mais ce n'est pas le cas. Pas de problème :

　① La taille du stockage local est limitée à environ 5 millions de caractères et les différents navigateurs sont incohérents
　② Le stockage local ne peut pas être lu en mode confidentialité
　③ L'essence du stockage local est de lire et d'écrire des fichiers s'il y en a. beaucoup de données, elles seront bloquées (Firefox importera des données en mémoire en même temps est effrayant quand on y pense)
④ le stockage local ne peut pas être exploré par les robots d'exploration, ne l'utilisez pas pour remplacer complètement le passage des paramètres d'URL

Les défauts ne cachent pas les avantages, les problèmes ci-dessus peuvent être évités, nous devons donc nous concentrer sur la façon d'utiliser le stockage local et sur la manière de l'utiliser correctement.
Utilisation du stockage local
Connaissances de base

Il existe deux types d'objets de stockage local :

　① sessionStrage : session signifie session. La session fait ici référence à la période de temps allant de l'entrée sur le site Web à la fermeture du site Web lorsque l'utilisateur navigue sur un site Web. La période de validité de l'objet de session n'est que limitée.

　② localStorage : enregistrez les données sur le périphérique matériel client, quel qu'il soit, ce qui signifie que les données seront toujours là lors de la prochaine mise sous tension de l'ordinateur.

La différence entre les deux est que l'un est destiné au stockage temporaire et l'autre au stockage à long terme.

Voici un code simple pour illustrer son utilisation de base :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <div id="msg"  style="marge :  10px 0; bordure : 1px noir uni ; remplissage :  10px; largeur : 300px ;   
  2.   hauteur : 100px;">  
  3. div>  
  4. <entrée type="texte"  id="texte" />
  5. <sélectionner id="type" >  
  6.   <option valeur="session" >sessionStorageoption>  
  7.   <option valeur="local" >localStorageoption>  
  8. sélectionner>  
  9. <bouton on clique="enregistrer( );">  
  10.   保存数据bouton>  
  11. <bouton onclique="charger( );">  
  12.   读取数据bouton>  
  13. <script type="texte/ javascript">  
  14.   var msg = document.getElementById('msg'),   
  15.             text = document.getElementById('text'),   
  16.             type = document.getElementById('type');   
  17.   
  18.   fonction save() {   
  19.     var str = text.value;   
  20.     var t = type.value;   
  21.     si (t == 'session') {   
  22.       sessionStorage.setItem('msg', str);   
  23.     } autre {   
  24.       localStorage.setItem('msg', str);   
  25.     }   
  26.   }   
  27.   
  28.   fonction load() {   
  29.     var t = type.value;   
  30.     si (t == 'session') {   
  31.       msg.innerHTML = sessionStorage.getItem('msg');   
  32.     } autre {   
  33.       msg.innerHTML = localStorage.getItem('msg');   
  34.     }   
  35.   }   
  36. script>  

　真实场景

　　实际工作中对localstorage的使用一般有以下需求：

　　① 缓存一般信息，如搜索页的出发城市，达到城市，非实时定位信息

　　② 缓存城市列表数据，这个数据往往比较大

　　③ 每条缓存信息需要可追踪，比如服务器通知城市数据更新，这个时候在最近一次访问的时候要自动设置过期

　　④ 每条信息具有过期日期状态，在过期外时间需要由服务器拉取数据

Code XML/HTML复制内容到剪贴板
  1. define([], function() {
  3. var Stockage = _.inherit({
  4. //Attributs par défaut
  5. propriétés : fonction () {
  7. //Objet proxy, la valeur par défaut est localstorage
  8. this.sProxy = fenêtre.localStorage;
  10. //60 * 60 * 24 * 30 * 1000 ms ==30 jours
  11. this.defaultLifeTime = 2592000000
  13. //Le cache local est utilisé pour stocker le mappage entre toutes les valeurs de clé de stockage local et les dates d'expiration
  14. this.keyCache = 'SYSTEM_KEY_TIMEOUT_MAP';
    16. //Lorsque la capacité du cache est pleine, le nombre de caches supprimés à chaque fois
  17. this.removeNum = 5 ;
    19. },
    21. assert: function () {
    22. if (
  22. this.sProxy === null) {
    23. lancer « ne pas remplacer la propriété sProxy » ;
    24. }  
    25. },
    27. initialiser : fonction (opts) {
    28. this.propertys();
    29. this.assert();
    30. },
  31. /*
  32. Ajouter un stockage local
  33. Le format des données comprend une valeur de clé unique, une chaîne JSON, une date d'expiration et une date de dépôt
    34. Le signe
  34. est un paramètre de requête formaté, utilisé pour renvoyer de nouvelles données lorsque la même requête a des paramètres différents. Par exemple, si la liste est la ville de Pékin, puis basculée vers Shanghai, il jugera que la balise. est différent et met à jour les données mises en cache. La balise est équivalente à Signature
    35. .
  35. Une seule information sera mise en cache pour chaque valeur clé
  36. */
  37. set : fonction (clé, valeur, délai d'attente, signe) {
  38. var _d = nouveau Date();
  39. //Date de dépôt
  40. var indate = _d.getTime();
  42. //Données enfin enregistrées
  43. var entité = null
    44. ;
  45. si (!timeout) {
  46. _d.setTime(_d.getTime() this.defaultLifeTime);
  47. timeout = _d.getTime();
  48. }  
  50. //
  51. this.setKeyCache(clé, délai d'attente);
  52. entity = this.buildStorageObj(value, indate, timeout, sign); >
    54. essayez {
    55. this.sProxy.setItem(key, JSON.stringify(entity));
    56. renvoie vrai;
    57. } capture(e) {
    58. //Lorsque le stockage local est plein, effacez tout
    59. if (
  59. e.name == 'QuotaExceededError') {
    60. // this.sProxy.clear();
    61. //Lorsque le stockage local est plein, sélectionnez les données les plus proches de l'heure d'expiration à supprimer. Cela aura également un certain impact, mais c'est mieux que de tout effacer. S'il y a trop de caches, ce processus le fera. prendre plus de temps, dans les 100 ms
    62. if (!this.removeLastCache()) throw 'La quantité de données stockées cette fois est trop importante'
    63. this.set(clé, valeur, délai d'attente, signe
  63. );
    64.                                                              
  64. console && console.log(e);
  65. }
  66. return false;
  67. },
  69. //Supprimer le cache expiré
  70. removeOverdueCache : function() {
  71. var tmpObj = null, je, len
  73. var maintenant = nouveau Date().getTime();
    74. //Obtenir la paire clé-valeur
    75. var
  75. cacheStr = this.sProxy.getItem(this.keyCache); var
    76. cacheMap
  76. = []; var newMap
    77. = [];
  77. if (!cacheStr) { retour;
  78. }  
    81. cacheMap
  81. =
    82. JSON
  82. .parse(cacheStr); pour (i
    83. =
  83. 0
    84. ,
  84. len = cacheMap.length; je < len ; > tmpObj = cacheMap[i];
  85. if (tmpObj.timeout < maintenant) {
  86. this.sProxy.removeItem(tmpObj.key); } autre { newMap.push(tmpObj);
  87.                                                              
  88. }  
  89. this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));
  91. },
  93. removeLastCache : function() {
  94. var je, len
  95. var num = this.removeNum ||
  97. //Obtenir la paire clé-valeur
  98. var cacheStr = this.sProxy.getItem(this.keyCache);
    99. var
  99. cacheMap = []; var
    100. delMap
  100. = [];
    101. //Indique que le stockage est trop grand
    102. if (!cacheStr) renvoie false
    104. cacheMap.sort(function (a, b) {
    105. return a.timeout - b.timeout
    106. });
    108. //Quelles données ont été supprimées
  109. delMap
    110. =
  110. cacheMap.splice(0, num); pour (i =
    111. 0
  111. , len = delMap.length; je < len ; > this.sProxy.removeItem(delMap[i].key); }  
  113. this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));
  114. renvoie vrai;
  115. },
  117. setKeyCache : fonction (clé, délai d'attente) {
  118. if (!key || !timeout || timeout <
  119. nouveau
  120. Date().getTime( )) retour; var i, len, tmpObj
  121. //Obtenir la chaîne de valeur de clé actuellement mise en cache
  122. var oldstr
  123. = this
  124. .sProxy.getItem(this.keyCache); var oldMap = []; //Si la clé actuelle existe déjà
  125. var drapeau = faux
  126. ;
  127. var obj = {};   
  128.       obj.key = clé ;   
  129.       obj.timeout = timeout ;   
  130.   
  131.       si (oldstr) {   
  132.         oldMap = JSON.parse(oldstr);   
  133.         if (!_.isArray(oldMap)) oldMap = [];   
  134.       }   
  135.   
  136.       pour (i = 0, len = oldMap.length; i < len; i ) {   
  137.         tmpObj = oldMap[i];   
  138.         if (tmpObj.key == key) {   
  139.           oldMap[i] = obj;   
  140.           drapeau = vrai;   
  141.           pause ;   
  142.         }   
  143.       }   
  144.       if (!flag) oldMap.push(obj);   
  145.       //最后将新数组放到缓存中   
  146.       this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));   
  147.   
  148.     },   
  149.   
  150.     buildStorageObj : fonction (valeur, date, délai d'attente, signe) {   
  151.       var obj = {   
  152.         valeur : valeur,   
  153.         délai d'expiration : délai d'expiration,   
  154.         signe : signe,   
  155.         indate: indate   
  156.       } ;   
  157.       return obj ;   
  158.     },
  160. get : fonction (clé, signe) {
  161. résultat var, maintenant = nouveau Date().getTime();
    162. essayez {
  163. résultat = ce.sProxy.getItem(key); if (!result) renvoie null
    165. résultat
  165. = JSON.parse(résultat);
    166. //Expiration des données
    167. if (result.timeout
  167. <
  168. maintenant) renvoie null
    169. //Une vérification de la signature est requise
    170. si (signe) {
    171. if (
  171. signe
    172. === result.sign)
  172. return result.value
    173. renvoie null
    174. } autre {
    175. return result.value
    176.                                                              
  177. } capture(e) {
  178. console && console.log(e);
  179. }  
  180. renvoie null
  181. },
  183. //Obtenir une signature
  184. getSign : fonction (clé) {
  185. résultat var,
    186. signe
  186. =
    187. null
  187. ; essayez {
    188. résultat
  188. =
    189. ce
  189. .sProxy.getItem(key); si (résultat) { résultat
    190. =
  190. JSON
    191. .parse(résultat);
  191. signe = résultat && résultat.sign
  192.                                                               } capture(e) { console && console.log(e);
    193. }  
  193.       panneau de retour ;   
  194.     },   
  195.   
  196.     supprimer : fonction (touche) {   
  197.       return this.sProxy.removeItem(key);   
  198.     },   
  199.   
  200.     clear : function () {   
  201.       this.sProxy.clear();   
  202.     }   
  203.   });   
  204.   
  205.   Storage.getInstance = fonction () {   
  206.     si (cette.instance) {   
  207.       return this.instance ;   
  208.     } autre {   
  209.       return this.instance = new this();   
  210.     }   
  211.   } ;   
  212.   
  213.   retour Stockage ;   
  214.   
  215. });  


Code XML/HTML复制内容到剪贴板
  1. define(['AbstractStorage'], function (AbstractStorage) {
  3. var Store = _.inherit({
  4. //Attributs par défaut
  5. propriétés : fonction () {
  7. //Chaque objet doit avoir une clé de stockage et ne peut pas être répété
  8. this.key = null
    9. ;
  10. //Le cycle de vie par défaut d'une donnée, S correspond aux secondes, M aux minutes, D aux jours
  11. this.lifeTime = '30M'
    12. ;
  13. //Données de retour par défaut
  14. // this.defaultData = null
    15. ;
  16. //Objet proxy, objet localstorage
  17. this.sProxy = nouveau AbstractStorage();
  19. },
  21. setOption : fonction (options) {
  22. _.extend(ce, options);
  23. },
  25. assert: function () {
  26. if (this.key === null) {
  27. lancer « ne pas remplacer la propriété clé » ;
  28. }  
  29. if (this.sProxy === null) {
  30. lancer « ne pas remplacer la propriété sProxy » ;
  31. }  
  32. },
  34. initialiser : fonction (opts) {
  35. this.propertys();
  36. this.setOption(opts);
  37. this.assert();
  38. },   
  39.   
  40.     _getLifeTime: function () {   
  41.       var délai d'attente = 0 ;   
  42.       var str = ce.lifeTime ;   
  43.       var unit = str.charAt(str.length - 1);   
  44.       var num = str.substring(0, str.length - 1);   
  45.       var Carte = {   
  46.         D : 86400,   
  47.         H : 3600,   
  48.         M : 60,   
  49.         S : 1   
  50.       } ;   
  51.       if (type d'unité == 'chaîne') {   
  52.         unitéunité = unit.toUpperCase();   
  53.       }   
  54.       délai d'expiration = num ;   
  55.       si (unité) délai d'attente = Carte[unité] ;   
  56.   
  57.       //单位为毫秒   
  58.       retour num * timeout * 1000 ;   
  59.     },   
  60.   
  61.     //缓存数据   
  62.     set : fonction (valeur, signe) {   
  63.       //获取过期时间   
  64.       var délai d'expiration = nouveau Date();   
  65.       timeout.setTime(timeout.getTime()   this._getLifeTime());   
  66.       this.sProxy.set(this.key, value, timeout.getTime(), sign);   
  67.     },   
  68.   
  69.     //设置单个属性   
  70.     setAttr : fonction (nom, valeur, signe) {   
  71.       clé var , obj ;   
  72.       if (_.isObject(name)) {   
  73.         pour (entrez le nom) {   
  74.           if (name.hasOwnProperty(key)) this.setAttr(k, name[k], value);   
  75.         }  
  76.         retour ;   
  77.       }   
  78.   
  79.       if (!sign) sign = this.getSign();   
  80.   
  81.       //获取当前对象   
  82.       obj = ceci.get(signe) || {} ;   
  83.       if (!obj) retour ;   
  84.       obj[nom] = valeur ;   
  85.       this.set(obj, sign);   
  86.   
  87.     },   
  88.   
  89.     getSign: function () {   
  90.       return this.sProxy.getSign(this.key);   
  91.     },   
  92.   
  93.     supprimer : function () {   
  94.       this.sProxy.remove(this.key);   
  95.     },   
  96.   
  97.     removeAttr : function (attrName) {   
  98.       var obj = this.get() || {} ;   
  99.       if (obj[attrName]) {   
  100.         supprimer obj[attrName] ;   
  101.       }   
  102.       this.set(obj);   
  103.     },   
  104.   
  105.     obtenir : fonction (signe) {   
  106.       var result = [], isEmpty = true, une ;   
  107.       var obj = this.sProxy.get(this.key, sign);   
  108.       var type = typeof obj;   
  109.       var o = { 'string' : true, 'number' : true, 'boolean' : true } ;   
  110.       if (o[type]) return obj;   
  111.   
  112.       if (_.isArray(obj)) {   
  113.         pour (var i = 0, len = obj.length; i < len; i ) {   
  114.           result[i] = obj[i];   
  115.         }  
  116.       } else if (_.isObject(obj)) {   
  117.         résultat = obj;   
  118.       }   
  119.   
  120.       pour (un en résultat) {   
  121.         isEmpty = false;   
  122.         pause ;   
  123.       }   
  124.       revenir !isEmpty  ? résultat  : nul ;   
  125.     },   
  126.   
  127.     getAttr: function (attrName, tag) {   
  128.       var obj = this.get(tag);   
  129.       var attrVal = null;   
  130.       si (obj) {   
  131.         attrVal = obj[attrName];   
  132.       }   
  133.       return attrVal ;   
  134.     }   
  135.   
  136.   });   
  137.   
  138.   Store.getInstance = fonction () {   
  139.     si (cette.instance) {   
  140.       return this.instance ;   
  141.     } autre {   
  142.       return this.instance = new this();   
  143.     }   
  144.   } ;   
  145.   
  146.   retour Magasin ;   
  147. });  

　　我们真实使用的时候是使用store这个类操作localstorage，代码结束简单测试：
201579150514318.jpg (488×184)

Pour Android Hybrid Le stockage local et le stockage local失效！一个简单不靠谱的解决方案是在webapp中加入：

Code XML/HTML复制内容到剪贴板
  1. window.onunload = function () { };//适合单页应用，不要问我为什么，我也不知道  
　结语

　　localstorage是移动开发必不可少的技术点，需要深入了解，具体业务代码后续会放到git上，有兴趣的朋友可以去了解


Étiquettes associées：
html5 localstorage
source：php.cn
Article précédent：Explication détaillée de l'utilisation de la balise ol dans les compétences du didacticiel HTML5_html5 Article suivant：Partage de plusieurs exemples de pages de compétences du didacticiel de conception et de modification HTML5_html5
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment faire apparaître mon image sur l'écran principal de la page ? Ce que je veux faire, c'est recevoir des photos en utilisant NASAAPI. Ces photos sont ensu...
Depuis 2024-04-06 15:33:12
0
1
433
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Quelle est la différence entre enctype et formenctype en HTML5 ? Je me demande simplement quelle est la différence entre les attributs enctype et formencty...
Depuis 2024-04-02 11:47:56
0
1
275
Rendre la page adaptée aux mobiles ? J'ai de nombreuses pages Web et quelques sites Web. Le fait est que je suis débutant. J'ut...
Depuis 2024-04-01 20:42:38
0
1
259
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal