Wie LocalStorage von H5 Aktualisierungswerte lokal speichert

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 abrufen

localStorage.valueOf( )//Alle Werte abrufen

localStorage.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 gleichen

Einige häufig verwendete Zusammenfassungen:

localStorage.key = 1;//Speicher festlegen, benannter Schlüssel, Wert ist 1

localStorage.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());　　//重新存储
    });

Das Obige kann eine praktische kleine Funktion implementieren, die H5 widerspiegelt Der lokale Speicher ist natürlich immer noch sehr nützlich, wenn viele Felder vorhanden sind. Siehe Folgendes, heruntergeladen aus dem Internet

<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(&#39;page&#39;);
</script>

Beispiel: Zähler, aktualisieren Sie die Seite, Sie können den Effekt sehen:

<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>

Es ist zu beachten, dass HTML5 nur lokal gespeichert werden kann Speichern Sie

Zeichen. String wird beim Speichern in einem beliebigen Format automatisch in eine Zeichenfolge konvertiert. Beim Lesen müssen Sie also die Typkonvertierung selbst durchführen. Aus diesem Grund muss parseInt im vorherigen Code verwendet werden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

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!