Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Tutorial zur Verwendung von Localstorage in HTML5_HTML5-Tutorial-Fähigkeiten

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

WBOY
Freigeben： 2016-05-16 15:46:27
Original
1664 Leute haben es durchsucht

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;
    10. //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
    14. this.keyCache
  14. = 'SYSTEM_KEY_TIMEOUT_MAP';
    15. //Wenn die Cache-Kapazität voll ist, wird die Anzahl der Caches jedes Mal gelöscht
  16. this.removeNum
    17. =
  17. 5;
    18. },
    20. assurance: function () {
    21. if (
  21. this.sProxy
    22. === 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
    33. 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;
    44. if (!timeout) {
    45. _d.setTime(_d.getTime() this.defaultLifeTime);
  46. timeout = _d.getTime();
    47. }  
    49. //
    50. this.setKeyCache(key, timeout);
  51. entity = this.buildStorageObj(value, indate, timeout, sign);
    53. versuchen Sie es mit {
    54. this.sProxy.setItem(key, JSON.stringify(entity));
    55. true zurückgeben;
    56. } Catch (e) {
    57. //Wenn der lokale Speicher voll ist, alles löschen
    58. if (
  58. e.name == 'QuotaExceededError') {
    59. // this.sProxy.clear();
    60. //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
    61. if (!this.removeLastCache()) throw 'Die diesmal gespeicherte Datenmenge ist zu groß';
  61. this.set(key, value, timeout, sign);
  62.                                                              
    63. console && console.log(e);
    64. }
  64. gibt false zurück;
  65. },
  67. //Abgelaufenen Cache löschen
  68. RemoveOverdueCache: Funktion () {
  69. var tmpObj = null, i, len;
    71. var
  71. now = new Date().getTime();
    72. //Das Schlüssel-Wert-Paar abrufen
    73. var
  73. cacheStr = this.sProxy.getItem(this.keyCache);
    74. var
  74. cacheMap = []; var
    75. newMap
  75. = []; if (!cacheStr) {
    76. zurück;
    77. }  
  79. cacheMap
    80. =
  80. JSON.parse(cacheStr);
    81. für (
  81. i
    82. =
  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 ||
    95. //Das Schlüssel-Wert-Paar abrufen
    96. var
  96. cacheStr = this.sProxy.getItem(this.keyCache);
    97. var
  97. cacheMap = []; var
    98. delMap
  98. = [];
    99. //Zeigt an, dass der Speicher zu groß ist
    100. if (!cacheStr) return false;
    102. cacheMap.sort(function (a, b) {
    103. return a.timeout - b.timeout;
    104. });
    106. //Welche Daten wurden gelöscht
  107. delMap
    108. =
  108. cacheMap.splice(0, num); für (i
    109. =
  109. 0, len = delMap.length; i < len ) { this.sProxy.removeItem(delMap[i].key);
    110. }  
    112. this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));
    113. true zurückgeben;
    114. },
    116. setKeyCache: Funktion (Schlüssel, Timeout) {
    117. if (!key || !timeout || timeout
  117. <
  118. new Date().getTime( )) zurück; var i, len, tmpObj;
  119. //Die aktuell zwischengespeicherte Schlüsselwertzeichenfolge abrufen
  120. var
    121. oldstr
  121. =
    122. this
  122. .sProxy.getItem( var oldMap = [];
    123. //Ob der aktuelle Schlüssel bereits existiert
  123. var flag
    124. =
  124. false
    125. ;
  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);
    162. if (!result) return null;
  163. result = JSON.parse(result);
    165. //Datenablauf
    166. if (result.timeout
  166. < now) return null;
  167. //Signaturüberprüfung ist erforderlich
  168. if (sign) {
  169. if (
    170. sign
  170. === result.sign) return result.value;
  171. null zurückgeben
  172. } else {
  173. return result.value;
  174.                                                              
    176. } Catch (e) {
    177. console && console.log(e);
    178. }  
    179. null zurückgeben
    180. },
    182. //Signatur erhalten
    183. getSign: Funktion (Schlüssel) {
    184. var result,
  184. sign
    185. =
  185. null; versuchen Sie es mit {
    186. result
  186. =
    187. this
  187. .sProxy.getItem(key); if (result) { result
    188. =
  188. JSON
    189. .parse(result);
  189. sign = result
    190. && 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;
    10. //Der Standardlebenszyklus eines Datenelements, S ist Sekunden, M ist Minuten, D ist Tage
  11. this.lifeTime = '30M';
  12. //Standard-Rückgabedaten
  13. //
    14. this.defaultData
  14. = null;
  15. //Proxy-Objekt, lokales Speicherobjekt
    17. this.sProxy
  17. = new AbstractStorage();
  18. },
  20. setOption: Funktion (Optionen) {
  21. _.extend(this, Optionen);
  22. },
  24. assurance: function () {
  25. if (
    26. this.key
  26. === null) { throw 'Schlüsseleigenschaft nicht überschreiben';
  27. }  
  28. if (
    29. this.sProxy
  29. === null) { throw 'sProxy-Eigenschaft nicht überschreiben';
    30. }  
    31. },
    33. initialisieren: Funktion (opts) {
    34. this.propertys();
    35. this.setOption(opts);
    36. this.assert();
    37. },   
  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，代码结束简单测试：
201579150514318.jpg (488×184)

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

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

　结语

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

Verwandte Etiketten：
html5 localstorage
Quelle：php.cn
Vorheriger Artikel：Ausführliche Erläuterung der Verwendung des OL-Tags in den HTML5_HTML5-Tutorial-Fähigkeiten Nächster Artikel：Teilen Sie mehrere Seitenbeispiele für HTML5-Design und -Modifikation_HTML5-Tutorial-Fähigkeiten
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
Aus 2024-04-06 15:33:12
0
1
433
Können PDF-Dateien mit HTML5 und Javascript ausgeführt werden? Ich habe die dumme Idee, ein Programm zu erstellen, das auf keinem Computer blockiert wird...
Aus 2024-04-05 12:57:00
0
1
456
Was ist der Unterschied zwischen enctype und formenctype in HTML5? Ich frage mich nur, was der Unterschied zwischen den Attributen enctype und formenctype in...
Aus 2024-04-02 11:47:56
0
1
275
Die Seite mobilfreundlich gestalten? Ich habe viele Webseiten und einige Websites. Die Sache ist, ich bin ein Anfänger. Ich ver...
Aus 2024-04-01 20:42:38
0
1
259
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage