Detaillierte Erläuterung der Verwendung von localStorage in Html5

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zur Verwendung von localStorage in HTML5 geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von localStorage in HTML5?

localStorage ist eine neu hinzugefügte Funktion von Html5. Diese Funktion wird hauptsächlich für die lokale Speicherung im Browser verwendet.

Bestimmen Sie, ob der Browser localStorage unterstützt.

  if (!window.localStorage) {        console.log("浏览器不支持localStorage")
    } else {        console.log("浏览器支持localStorage")
    }

Go So schreiben Sie Inhalte in localStorage:

  var DemoStorage = window.localStorage;    //写入方法1：
    DemoStorage.name = "Tom";    //写入方法2：
    DemoStorage["age"] = 18;    //写入方法3：
    DemoStorage.setItem("hobby", "sport");    
    console.log(DemoStorage.name,typeof DemoStorage.name);    console.log(DemoStorage.age, typeof DemoStorage.age);    console.log(DemoStorage.hobby, typeof DemoStorage.hobby);    /*输出结果:
    Tom string
    18 string
    sport string*/

Im obigen Codebeispiel ist die Alterseingabe eine Zahl, aber die Ausgabe ist eine Zeichenfolge. Es ist ersichtlich, dass localStorage nur Daten vom Typ Zeichenfolge speichern kann.

3. Löschen von localStorage:

1. Alle Inhalte in localStorage löschen:

Storage.clear() akzeptiert keine Parameter, sondern nur einfache Löschen Sie das gesamte Speicherobjekt , das dem Domänennamen entspricht.

 var DemoStorage = window.localStorage;    
    DemoStorage.name = "Tom";
    DemoStorage.age = 18;
    DemoStorage.hobby = "sport";    
    console.log(DemoStorage);    //输出：Storage {age: "18", hobby: "sport", name: "Tom", length: 3}
    DemoStorage.clear();    console.log(DemoStorage);    //输出: Storage {length: 0}

2. Löschen Sie ein Schlüssel-Wert-Paar:

Storage.removeItem() akzeptiert einen Parameter – den Schlüssel des Datenelements, das Sie entfernen möchten, und dann die entsprechenden Daten Das Element wird aus dem Speicherobjekt entfernt, das dem Domänennamen entspricht.

   var DemoStorage = window.localStorage;
    DemoStorage.name = "Tom";
    DemoStorage.age = 18;
    DemoStorage.hobby = "sport";    console.log(DemoStorage);    //输出：Storage {age: "18", hobby: "sport", name: "Tom", length: 3}
    DemoStorage.removeItem("age");    console.log(DemoStorage);    //输出：Storage {hobby: "sport", name: "Tom", length: 2}

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:

JavaScript-Code zum Ausblenden von Elementen nacheinander

Detaillierte Erläuterung der Rückruffunktion von Javascript (Callback)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von localStorage in Html5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!