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

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';
//Lorsque la capacité du cache est pleine, le nombre de caches supprimés à chaque fois
17. this.removeNum = 5 ;
},
assert: function () {
if (
22. this.sProxy === null) {
lancer « ne pas remplacer la propriété sProxy » ;
}  
},
initialiser : fonction (opts) {
this.propertys();
this.assert();
},
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
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. 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
;
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); >
essayez {
this.sProxy.setItem(key, JSON.stringify(entity));
renvoie vrai;
} capture(e) {
//Lorsque le stockage local est plein, effacez tout
if (
59. e.name == 'QuotaExceededError') {
// this.sProxy.clear();
//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
if (!this.removeLastCache()) throw 'La quantité de données stockées cette fois est trop importante'
this.set(clé, valeur, délai d'attente, signe
63. );
                                                             
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();
//Obtenir la paire clé-valeur
var
75. cacheStr = this.sProxy.getItem(this.keyCache); var
cacheMap
76. = []; var newMap
= [];
77. if (!cacheStr) { retour;
78. }  
cacheMap
81. =
JSON
82. .parse(cacheStr); pour (i
=
83. 0
,
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);
var
99. cacheMap = []; var
delMap
100. = [];
//Indique que le stockage est trop grand
if (!cacheStr) renvoie false
cacheMap.sort(function (a, b) {
return a.timeout - b.timeout
});
//Quelles données ont été supprimées
109. delMap
=
110. cacheMap.splice(0, num); pour (i =
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();
essayez {
163. résultat = ce.sProxy.getItem(key); if (!result) renvoie null
résultat
165. = JSON.parse(résultat);
//Expiration des données
if (result.timeout
167. <
168. maintenant) renvoie null
//Une vérification de la signature est requise
si (signe) {
if (
171. signe
=== result.sign)
172. return result.value
renvoie null
} autre {
return result.value
                                                             
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,
signe
186. =
null
187. ; essayez {
résultat
188. =
ce
189. .sProxy.getItem(key); si (résultat) { résultat
=
190. JSON
.parse(résultat);
191. signe = résultat && résultat.sign
192.                                                               } capture(e) { console && console.log(e);
}  
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
;
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'
;
13. //Données de retour par défaut
14. // this.defaultData = null
;
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，代码结束简单测试：

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

Code XML/HTML复制内容到剪贴板

1. window.onunload = function () { };//适合单页应用，不要问我为什么，我也不知道  

　结语

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