Was sind die lokalen Speicher in HTML5?

html5 Der lokale Speicher umfasst: 1. localStorage, dessen Lebenszyklus dauerhaft ist, sofern die localStorage-Informationen nicht aktiv gelöscht werden. 2. sessionStorage, das nur in der aktuellen Sitzung gültig ist und nach dem Schließen gelöscht wird Seite oder Browser löschen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

HTML5-Webspeicher ist lokaler Speicher, der auf dem Client gespeichert wird, einschließlich localStorage und sessionStorage. HTML5-Webspeicher wird in Form von Schlüssel/Wert-Paaren gespeichert, normalerweise als Zeichenfolgen.

localStorage

Der Lebenszyklus von localStorage ist dauerhaft, sofern die LocalStorage-Informationen nicht aktiv gelöscht werden. Die Größe der gespeicherten Daten beträgt im Allgemeinen 5 MB. Sie werden nur auf dem Client (dh im Browser) gespeichert und nehmen nicht an der Kommunikation mit dem Server teil.

        // 1、保存数据到本地
        // 第一个参数是保存的变量名，第二个是赋给变量的值
        localStorage.setItem('Author', 'local');
        // 2、从本地存储获取数据
        localStorage.getItem('Author');
        // 3、从本地存储删除某个已保存的数据
        localStorage.removeItem('Author');
        // 4、清除所有保存的数据
        localStorage.clear();

sessionStorage

sessionStorage ist nur unter der aktuellen Sitzung gültig und wird nach dem Schließen der Seite oder des Browsers gelöscht. Die Größe der gespeicherten Daten beträgt im Allgemeinen 5 MB. Sie werden nur auf dem Client (dh im Browser) gespeichert und nehmen nicht an der Kommunikation mit dem Server teil.

        // 1、保存数据到本地
        // 第一个参数是保存的变量名，第二个是赋给变量的值
        sessionStorage.setItem('Author', 'session');
        // 2、从本地存储获取数据
        sessionStorage.getItem('Author');
        // 3、从本地存储删除某个已保存的数据
        sessionStorage.removeItem('Author');
        // 4、清除所有保存的数据
        sessionStorage.clear();

Komplexe Datenspeicherung

Bei den oben genannten handelt es sich um die Speicherung einfacher Datentypen. Wenn die zu speichernden Daten jedoch ein Objekt oder Array sind, ist eine direkte Speicherung nicht möglich

Falsche Speicherung:

    var user = {
      username: 'liu',
      password: '123456'
    };
    sessionStorage.setItem('user', user);
    console.log(sessionStorage.getItem('user'));

Zu diesem Zeitpunkt müssen Sie das Datenformat konvertieren.

Vor dem Speichern von Daten: Verwenden Sie JSON.stringify, um das Objekt in einen String umzuwandeln.

Nach dem Abrufen der Daten: Verwenden Sie JSON.parse, um den String in ein Objekt umzuwandeln.

    var user = {
      username: 'liu',
      password: '123456'
    };
    user = JSON.stringify(user);
    sessionStorage.setItem('user', user);
    var account = sessionStorage.getItem('user');
    console.log(account);
    account = JSON.parse(account)
    console.log(account);

Empfohlen Tutorial: „ HTML-Video-Tutorial》

Das obige ist der detaillierte Inhalt vonWas sind die lokalen Speicher in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!