Tutorial zur Verwendung von Localstorage in HTML5_HTML5-Tutorial-Fähigkeiten

Was ist Localstorage?

Vor ein paar Tagen stellte ich fest, dass die Funktionsweise von Cookies in einem alten Projekt sehr seltsam war. Nach Rücksprache wollte ich einige Informationen zwischenspeichern, um die Übergabe von Parametern an die URL zu vermeiden, aber ich habe nicht über die Probleme nachgedacht, die Cookies mit sich bringen würden Ursache:

　① Die Cookie-Größe ist auf etwa 4 KB begrenzt, was nicht zum Speichern von Geschäftsdaten geeignet ist
　② Cookies werden jedes Mal zusammen mit HTTP-Transaktionen gesendet, was Bandbreite verschwendet

Wir führen mobile Projekte durch, daher ist die Technologie, die hier wirklich geeignet ist, Localstorage. Man kann sagen, dass es sich um eine Optimierung von Cookies handelt, mit der Daten bequem auf dem Client gespeichert werden können HTTP, aber das ist kein Problem:

　① Die Größe von localstorage ist auf etwa 5 Millionen Zeichen begrenzt und verschiedene Browser sind inkonsistent
　② Localstorage kann im Datenschutzmodus nicht gelesen werden
　③ Das ​​Wesentliche von localstorage ist das Lesen und Schreiben von Dateien, falls vorhanden Viele Daten bleiben hängen (Firefox wird das gleichzeitige Importieren von Daten in den Speicher beängstigend machen, wenn man darüber nachdenkt)
④ Localstorage kann nicht von Crawlern gecrawlt werden. Verwenden Sie es nicht, um die Übergabe von URL-Parametern vollständig zu ersetzen

Mängel verbergen nicht die Vorteile, die oben genannten Probleme können vermieden werden, daher sollte unser Fokus auf der Verwendung von Localstorage und der richtigen Verwendung liegen.
Nutzung von Localstorage
Grundkenntnisse

Es gibt zwei Arten von Localstorage-Speicherobjekten:

　① sessionStrage: Sitzung bedeutet Sitzung hier bezieht sich auf den Zeitraum vom Betreten der Website bis zum Schließen der Website, wenn der Benutzer eine Website durchsucht.

　② localStorage: Speichern Sie die Daten auf dem Client-Hardwaregerät, unabhängig davon, um was es sich handelt. Dies bedeutet, dass die Daten beim nächsten Einschalten des Computers immer noch vorhanden sind.

Der Unterschied zwischen den beiden besteht darin, dass eines für die vorübergehende Speicherung und das andere für die Langzeitspeicherung vorgesehen ist.

Hier ist ein einfacher Code, um seine grundlegende Verwendung zu veranschaulichen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

1. <div id="msg"  Stil="Rand: 10px 0; Rahmen: 1px schwarz; Innenraum: 10px; Breite: 300px;   
2.   height: 100px;">  
3. div>  
4. <Eingabe Typ="Text"  id="text" />
5. <select id="type" >  
6.   <Option Wert="session" >sessionStorageOption>  
7.   <Option Wert="lokal" >localStorageOption>  
8. auswählen>  
9. <button onclick="save( );">  
10.   保存数据Schaltfläche>  
11. <button onclick="load( );">  
12.   读取数据Schaltfläche>  
13. <script type="text/ Javascript">  
14.   var msg = document.getElementById('msg'),   
15.             text = document.getElementById('text'),   
16.             type = document.getElementById('type');   
17.   
18.   Funktion save() {   
19.     var str = text.value;   
20.     var t = type.value;   
21.     if (t == 'session') {   
22.       sessionStorage.setItem('msg', str);   
23.     } else {   
24.       localStorage.setItem('msg', str);   
25.     }   
26.   }   
27.   
28.   Funktion load() {   
29.     var t = type.value;   
30.     if (t == 'session') {   
31.       msg.innerHTML = sessionStorage.getItem('msg');   
32.     } else {   
33.       msg.innerHTML = localStorage.getItem('msg');   
34.     }   
35.   }   
36. Skript>  

　真实场景

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

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

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

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

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

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

1. define([], function () {
3. var Storage = _.inherit({
4. //Standardattribute
5. Eigenschaften: Funktion () {
7. //Proxy-Objekt, Standard ist localstorage
8. this.sProxy = window.localStorage;
//60 * 60 * 24 * 30 * 1000
10. ms ==30 Tage
11. this.defaultLifeTime = 2592000000;
12. //Der lokale Cache wird zum Speichern der Zuordnung zwischen allen Schlüsselwerten und Ablaufdaten des lokalen Speichers verwendet
this.keyCache
14. = 'SYSTEM_KEY_TIMEOUT_MAP';
//Wenn die Cache-Kapazität voll ist, wird die Anzahl der Caches jedes Mal gelöscht
16. this.removeNum
=
17. 5;
},
assurance: function () {
if (
21. this.sProxy
=== null) {
22. throw 'sProxy-Eigenschaft nicht überschreiben'; }  
23. },
25. initialisieren: Funktion (opts) {
26. this.propertys();
27. this.assert();
28. },
30. /*
31. Lokalen Speicher hinzufügen
32. Das Datenformat umfasst einen eindeutigen Schlüsselwert, eine JSON-Zeichenfolge, ein Ablaufdatum und ein Einzahlungsdatum
Das
33. -Zeichen ist ein formatierter Anforderungsparameter, der verwendet wird, um neue Daten zurückzugeben, wenn dieselbe Anforderung unterschiedliche Parameter hat. Wenn die Liste beispielsweise die Stadt Peking ist und dann nach Shanghai gewechselt wird, wird das Tag beurteilt ist anders und aktualisiert die zwischengespeicherten Daten. Das Tag entspricht Signatur
34. Für jeden Schlüsselwert wird nur eine Information zwischengespeichert
35. */
36. set: Funktion (Schlüssel, Wert, Timeout, Vorzeichen) {
37. var _d = neu Datum();
38. //Einzahlungsdatum
39. var indate = _d.getTime();
41. //Endlich gespeicherte Daten
42. var entity = null;
if (!timeout) {
_d.setTime(_d.getTime() this.defaultLifeTime);
46. timeout = _d.getTime();
}  
//
this.setKeyCache(key, timeout);
51. entity = this.buildStorageObj(value, indate, timeout, sign);
versuchen Sie es mit {
this.sProxy.setItem(key, JSON.stringify(entity));
true zurückgeben;
} Catch (e) {
//Wenn der lokale Speicher voll ist, alles löschen
if (
58. e.name == 'QuotaExceededError') {
// this.sProxy.clear();
//Wenn der lokale Speicher voll ist, wählen Sie die zu löschenden Daten aus, die am nächsten an der Ablaufzeit liegen, aber es fühlt sich besser an, als alles zu löschen zeitaufwändiger sein, innerhalb von 100 ms
if (!this.removeLastCache()) throw 'Die diesmal gespeicherte Datenmenge ist zu groß';
61. this.set(key, value, timeout, sign);
62.                                                              
console && console.log(e);
}
64. gibt false zurück;
65. },
67. //Abgelaufenen Cache löschen
68. RemoveOverdueCache: Funktion () {
69. var tmpObj = null, i, len;
var
71. now = new Date().getTime();
//Das Schlüssel-Wert-Paar abrufen
var
73. cacheStr = this.sProxy.getItem(this.keyCache);
var
74. cacheMap = []; var
newMap
75. = []; if (!cacheStr) {
zurück;
}  
79. cacheMap
=
80. JSON.parse(cacheStr);
für (
81. i
=
82. 0, len = cacheMap.length; i < len; > tmpObj =
83. cacheMap[i]; if (tmpObj.timeout < now
84. ) { this.sProxy.removeItem(tmpObj.key); } else {
85. newMap.push(tmpObj);
86.                                                               }  
87. this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));
89. },
91. RemoveLastCache: Funktion () {
92. var i, len;
93. var num = this.removeNum ||
//Das Schlüssel-Wert-Paar abrufen
var
96. cacheStr = this.sProxy.getItem(this.keyCache);
var
97. cacheMap = []; var
delMap
98. = [];
//Zeigt an, dass der Speicher zu groß ist
if (!cacheStr) return false;
cacheMap.sort(function (a, b) {
return a.timeout - b.timeout;
});
//Welche Daten wurden gelöscht
107. delMap
=
108. cacheMap.splice(0, num); für (i
=
109. 0, len = delMap.length; i < len ) { this.sProxy.removeItem(delMap[i].key);
}  
this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));
true zurückgeben;
},
setKeyCache: Funktion (Schlüssel, Timeout) {
if (!key || !timeout || timeout
117. <
118. new Date().getTime( )) zurück; var i, len, tmpObj;
119. //Die aktuell zwischengespeicherte Schlüsselwertzeichenfolge abrufen
120. var
oldstr
121. =
this
122. .sProxy.getItem( var oldMap = [];
//Ob der aktuelle Schlüssel bereits existiert
123. var flag
=
124. false
;
125. var obj = {};   
126.       obj.key = key;   
127.       obj.timeout = timeout;   
128.   
129.       if (oldstr) {   
130.         oldMap = JSON.parse(oldstr);   
131.         if (!_.isArray(oldMap)) oldMap = [];   
132.       }   
133.   
134.       für (i = 0, len = oldMap.length; i < len; i ) {   
135.         tmpObj = oldMap[i];   
136.         if (tmpObj.key == key) {   
137.           oldMap[i] = obj;   
138.           flag = true;   
139.           Pause;   
140.         }   
141.       }   
142.       if (!flag) oldMap.push(obj);   
143.       //最后将新数组放到缓存中   
144.       this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));   
145.   
146.     },   
147.   
148.     buildStorageObj: Funktion (Wert, Indate, Timeout, Sign) {   
149.       var obj = {   
150.         Wert: Wert,   
151.         timeout: timeout,   
152.         Zeichen: Zeichen,   
153.         indate: indate   
154.       };   
155.       return obj;   
156.     },
158. get: Funktion (Schlüssel, Zeichen) {
159. var result, now = new Date().getTime(
160. versuchen Sie es mit {
161. result = this.sProxy.getItem(key);
if (!result) return null;
163. result = JSON.parse(result);
//Datenablauf
if (result.timeout
166. < now) return null;
167. //Signaturüberprüfung ist erforderlich
168. if (sign) {
169. if (
sign
170. === result.sign) return result.value;
171. null zurückgeben
172. } else {
173. return result.value;
174.                                                              
} Catch (e) {
console && console.log(e);
}  
null zurückgeben
},
//Signatur erhalten
getSign: Funktion (Schlüssel) {
var result,
184. sign
=
185. null; versuchen Sie es mit {
result
186. =
this
187. .sProxy.getItem(key); if (result) { result
=
188. JSON
.parse(result);
189. sign = result
&& result.sign
190.                                                               } Catch (e) { console && console.log(e);
191. }  
192.       Rückgabezeichen;   
193.     },   
194.   
195.     remove: function (key) {   
196.       return this.sProxy.removeItem(key);   
197.     },   
198.   
199.     clear: function () {   
200.       this.sProxy.clear();   
201.     }   
202.   });   
203.   
204.   Storage.getInstance = Funktion () {   
205.     if (this.instance) {   
206.       return this.instance;   
207.     } else {   
208.       return this.instance = new this();   
209.     }   
210.   };   
211.   
212.   zurück Lagerung;   
213.   
214. });  

这段代码包含了localstorage的基本操作，并且对以上问题做了处理，而真实的使用还要再抽象：

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

1. define(['AbstractStorage'], function (AbstractStorage) {
3. var Store = _.inherit({
4. //Standardattribute
5. Eigenschaften: Funktion () {
7. //Jedes Objekt muss einen Speicherschlüssel haben und kann nicht wiederholt werden
8. this.key = null;
//Der Standardlebenszyklus eines Datenelements, S ist Sekunden, M ist Minuten, D ist Tage
11. this.lifeTime = '30M';
12. //Standard-Rückgabedaten
13. //
this.defaultData
14. = null;
15. //Proxy-Objekt, lokales Speicherobjekt
this.sProxy
17. = new AbstractStorage();
18. },
20. setOption: Funktion (Optionen) {
21. _.extend(this, Optionen);
22. },
24. assurance: function () {
25. if (
this.key
26. === null) { throw 'Schlüsseleigenschaft nicht überschreiben';
27. }  
28. if (
this.sProxy
29. === null) { throw 'sProxy-Eigenschaft nicht überschreiben';
}  
},
initialisieren: Funktion (opts) {
this.propertys();
this.setOption(opts);
this.assert();
},   
37.   
38.     _getLifeTime: function () {   
39.       var timeout = 0;   
40.       var str = this.lifeTime;   
41.       var unit = str.charAt(str.length - 1);   
42.       var num = str.substring(0, str.length - 1);   
43.       var Karte = {   
44.         D: 86400,   
45.         H: 3600,   
46.         M: 60,   
47.         S: 1   
48.       };   
49.       if (typeof unit == 'string') {   
50.         unitunit = unit.toUpperCase();   
51.       }   
52.       timeout = num;   
53.       if (unit) timeout = Map[unit];   
54.   
55.       //单位为毫秒   
56.       return num * timeout * 1000 ;   
57.     },   
58.   
59.     //缓存数据   
60.     set: Funktion (Wert, Vorzeichen) {   
61.       //获取过期时间   
62.       var timeout = new Date();   
63.       timeout.setTime(timeout.getTime()   this._getLifeTime());   
64.       this.sProxy.set(this.key, value, timeout.getTime(), sign);   
65.     },   
66.   
67.     //设置单个属性   
68.     setAttr: Funktion (Name, Wert, Zeichen) {   
69.       var key, obj;   
70.       if (_.isObject(name)) {   
71.         für (Namen eingeben) {   
72.           if (name.hasOwnProperty(key)) this.setAttr(k, name[k], value);   
73.         }  
74.         zurück;   
75.       }   
76.   
77.       if (!sign) sign = this.getSign();   
78.   
79.       //获取当前对象   
80.       obj = this.get(sign) || {};   
81.       if (!obj) return;   
82.       obj[name] = value;   
83.       this.set(obj, sign);   
84.   
85.     },   
86.   
87.     getSign: function () {   
88.       return this.sProxy.getSign(this.key);   
89.     },   
90.   
91.     remove: function () {   
92.       this.sProxy.remove(this.key);   
93.     },   
94.   
95.     removeAttr: function (attrName) {   
96.       var obj = this.get() || {};   
97.       if (obj[attrName]) {   
98.         delete obj[attrName];   
99.       }   
100.       this.set(obj);   
101.     },   
102.   
103.     get: function (sign) {   
104.       var result = [], isEmpty = true, a;   
105.       var obj = this.sProxy.get(this.key, sign);   
106.       var type = typeof obj;   
107.       var o = { 'string': true, 'number': true, 'boolean': true };   
108.       if (o[type]) return obj;   
109.   
110.       if (_.isArray(obj)) {   
111.         für (var i = 0, len = obj.length; i < len; i ) {   
112.           result[i] = obj[i];   
113.         }  
114.       } else if (_.isObject(obj)) {   
115.         result = obj;   
116.       }   
117.   
118.       für (ein Ergebnis) {   
119.         isEmpty = false;   
120.         Pause;   
121.       }   
122.       return !isEmpty ? Ergebnis : null;   
123.     },   
124.   
125.     getAttr: function (attrName, tag) {   
126.       var obj = this.get(tag);   
127.       var attrVal = null;   
128.       if (obj) {   
129.         attrVal = obj[attrName];   
130.       }   
131.       return attrVal;   
132.     }   
133.   
134.   });   
135.   
136.   Store.getInstance = Funktion () {   
137.     if (this.instance) {   
138.       return this.instance;   
139.     } else {   
140.       return this.instance = new this();   
141.     }   
142.   };   
143.   
144.   Retouren-Shop;   
145. });  

　　我们真实使用的时候是使用store这个类操作localstorage，代码结束简单测试：

　存储完成, 以后都不会走请求, 于是今天的代码基本结束, 最后在Android Hybrid中有一后退按钮, 此按钮一旦按下会回到上一个页面,这个时候里面的localstorage可能会读取失效！一个简单不靠谱的解决方案是在webapp中加入:

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

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

　结语

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