Dieses Mal zeige ich Ihnen, wie der LocalStorage von H5 Aktualisierungswerte lokal speichert. Was sind die Vorsichtsmaßnahmen für den LocalStorage von H5, um Aktualisierungswerte lokal zu speichern? .
Der größte Unterschied zwischen den beiden Speichertechnologien von H5 ist der Lebenszyklus.
1. localStorage ist lokaler Speicher und die Speicherdauer ist nicht begrenzt;
2 gehen verloren, wenn die Seite geschlossen wird.
Verwendung:
localStorage.setItem("key", "value") //Storage localStorage.getItem(key)//Den Wert nach Schlüssel abrufenlocalStorage.valueOf( )//Alle Werte abrufenlocalStorage.removeItem("key")//Einen einzelnen Wert löschen, Achten Sie auf die Anführungszeichen localStorage.clear()//Alle Daten löschen localStorage.length//Anzahl der Daten abrufen localStorage.key(N) // Holen Sie sich den N-ten Schlüsselwert jeder Daten Hinweis: localStorage und sessionStorage sind die gleichen wie oben und die Verwendungsmethoden sind die gleichenEinige häufig verwendete Zusammenfassungen:
localStorage.key = 1;//Speicher festlegen, benannter Schlüssel, Wert ist 1localStorage.removeItem("key");//Entfernen Speicherschlüssel, denken Sie daran, Anführungszeichen hinzuzufügen Das Folgende ist ein praktisches Beispiel zum Testen: um den eingegebenen Textinhalt lokal zu speichern, sodass nach dem Schließen des Browsers und dem erneuten Öffnen der zuvor eingegebene Inhalt erhalten bleibt ist noch da (üblich in DingTalk auf Mobiltelefonen) Feldeintrag für Urlaub und andere Felder im Protokoll). Erstellen Sie zunächst einen Textbereich Das Folgende ist jQuery:if(!localStorage.getItem("text")) //window对象的话,前面的window省略了哦 localStorage.setItem("text",""); //这里先判断一下,做空白存储,否则返回 NULL 显示出来体验不好,这里的if大括号省去了 localStorage.text = localStorage.getItem("text"); //取值 $("textarea").html(localStorage.text); //显示 $("textarea").keyup(function(){ //这里有很多,比如blur, change, keydown, 还有做个定时器也行,实用于多字段存储 localStorage.setItem("text",$(this).val()); //重新存储 });
<script type="text/javascript"> if(window.sessionStorage){ alert('ok'); }else{ alert('fail'); } // 设置值 sessionStorage.setItem('key_a', 1); // 取值 var key_a = sessionStorage.getItem('key_a'); console.log(key_a); // 删除 sessionStorage.removeItem('key_a'); console.log(sessionStorage.getItem('key_a'));// null sessionStorage.setItem('key_b', 1); sessionStorage.setItem('key_c', 2); // 清除所有键值 sessionStorage.clear(); console.log(sessionStorage.key_b); console.log(sessionStorage.key_c); console.log('=================='); // 设置值和取值也可以使用.符号,类似于取对象属性 // 设置值 sessionStorage.key_d = 12; // 取值 var key_d = sessionStorage.key_d; console.log(key_d); // 有个小区别,如果这个key没有了。一个返回值undefined,一个是null console.log(sessionStorage.key_null);// undefined console.log(sessionStorage.getItem('key_null'));// null console.log('==========简单演示一个存放对象的例子========'); var obj = { a : 12, b : [1,2,3,4,5], c : { x : 'a', y : ['bb', 12, 'cc', {a:1,b:2}], z : 1333 } }; sessionStorage.setItem('page', JSON.stringify(obj)); // 取值 var page = JSON.parse(sessionStorage.getItem('page')); console.log(page); // 遍历下数组 for(var i=0;i< page.b.length;i++){ console.log(page.b[i]); } // 遍历对象,通常用in for(var j in page.c){ console.log(page.c[j]) } // 删除key sessionStorage.removeItem('page'); </script>
<p id="test"></p> <script> var storage = window.localStorage; if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0); storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必须格式转换 document.getElementById("test").innerHTML = storage.pageLoadCount; //showStorage(); </script>
Ausführliche Erklärung der H5-Speichermethode
zepto ermöglicht nahtloses Auf- und Abscrollen auf dem mobilen Endgerät
Das obige ist der detaillierte Inhalt vonWie LocalStorage von H5 Aktualisierungswerte lokal speichert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!