JavaScript
Web Storage

Syntax

• localStorage.setItem (Name, Wert);

• localStorage.getItem (name);

• localStorage.name = Wert;

• localStorage.name;

• localStorage.clear ()

• localStorage.removeItem (name);

Parameter

Bemerkungen

LocalStorage verwenden

Das localStorage-Objekt bietet einen dauerhaften (aber nicht permanenten - siehe Grenzwerte) Schlüsselwertspeicher für Zeichenfolgen. Alle Änderungen sind sofort in allen anderen Fenstern / Bildern desselben Ursprungs sichtbar. Die gespeicherten Werte bleiben auf unbestimmte Zeit erhalten, es sei denn, der Benutzer löscht gespeicherte Daten oder konfiguriert ein Ablauflimit. localStorage verwendet eine Map-ähnliche Schnittstelle zum Abrufen und Einstellen von Werten.

localStorage.setItem('name', "John Smith");
console.log(localStorage.getItem('name')); // "John Smith"

localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // null

Wenn Sie einfache strukturierte Daten speichern möchten, können Sie sie mithilfe von JSON in und aus Zeichenfolgen für die Speicherung serialisieren.

var players = [{name: "Tyler", score: 22}, {name: "Ryan", score: 41}];
localStorage.setItem('players', JSON.stringify(players));

console.log(JSON.parse(localStorage.getItem('players')));
// [ Object { name: "Tyler", score: 22 }, Object { name: "Ryan", score: 41 } ]

localStorage-Grenzwerte in Browsern

Mobile Browser:

Desktop-Browser:

Speicherereignisse

Wenn ein Wert in localStorage festgelegt ist, wird ein storage für alle anderen windows demselben Ursprung ausgelöst. Dies kann verwendet werden, um den Status zwischen verschiedenen Seiten zu synchronisieren, ohne erneut zu laden oder mit einem Server zu kommunizieren. Beispielsweise können wir den Wert eines Eingabeelements als Absatztext in einem anderen Fenster darstellen:

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

var output = document.createElement('p');
document.body.appendChild(output);

output.textContent = localStorage.getItem('user-value');

window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

Anmerkungen

Das Ereignis wird unter Chrome, Edge und Safari nicht ausgelöst oder erfasst, wenn die Domäne über ein Skript geändert wurde.

// page url: http://sub.a.com/1.html
document.domain = 'a.com';

var input = document.createElement('input');
document.body.appendChild(input);

input.value = localStorage.getItem('user-value');

input.oninput = function(event) {
  localStorage.setItem('user-value', input.value);
};

// page url: http://sub.a.com/2.html
document.domain = 'a.com';

var output = document.createElement('p');
document.body.appendChild(output);

// Listener will never called under Chrome(53), Edge and Safari(10.0).
window.addEventListener('storage', function(event) {
  if (event.key === 'user-value') {
    output.textContent = event.newValue;
  }
});

sessionStorage

Das sessionStorage-Objekt implementiert dieselbe Storage-Schnittstelle wie localStorage. Die sessionStorage-Daten werden jedoch nicht für alle Seiten des gleichen Ursprungs freigegeben, sondern für jedes Fenster / jede Registerkarte separat gespeichert. Gespeicherte Daten bleiben zwischen den Seiten dieses Fensters / Registers erhalten, solange sie geöffnet sind. Sie sind jedoch an keiner anderen Stelle sichtbar.

var audio = document.querySelector('audio');

// Maintain the volume if the user clicks a link then navigates back here.
audio.volume = Number(sessionStorage.getItem('volume') || 1.0);
audio.onvolumechange = function(event) {
  sessionStorage.setItem('volume', audio.volume);
};

Speichern Sie die Daten in sessionStorage

sessionStorage.setItem('key', 'value');

Erhalten Sie gespeicherte Daten von sessionStorage

var data = sessionStorage.getItem('key');

Entfernen Sie gespeicherte Daten aus sessionStorage

sessionStorage.removeItem('key')

Speicher löschen

Um den Speicher zu löschen, starten Sie einfach

localStorage.clear();

Fehlerbedingungen

Wenn die meisten Browser so konfiguriert sind, dass sie Cookies blockieren, wird auch localStorage blockiert. Versuche, es zu verwenden, führen zu einer Ausnahme. Vergessen Sie nicht , diese Fälle zu verwalten .

var video = document.querySelector('video')
try {
    video.volume = localStorage.getItem('volume')
} catch (error) {
    alert('If you\'d like your volume saved, turn on cookies')
}
video.play()

Wenn der Fehler nicht behandelt wird, funktioniert das Programm nicht mehr ordnungsgemäß.

Speicherelement entfernen

Zum Entfernen eines bestimmten Elements aus dem Browser Storage (das Gegenteil von setItem ) verwenden Sie removeItem

localStorage.removeItem("greet");

Beispiel:

localStorage.setItem("greet", "hi");
localStorage.removeItem("greet");

console.log( localStorage.getItem("greet") ); // null

(Gleiches gilt für sessionStorage )

Einfachere Handhabung von Storage

localStorage , sessionStorage sind JavaScript- Objekte und können als solche behandelt werden.
Anstelle von Speichermethoden wie .getItem() , .setItem() usw. verwenden Sie eine einfachere Alternative:

// Set
localStorage.greet = "Hi!"; // Same as: window.localStorage.setItem("greet", "Hi!");

// Get
localStorage.greet;         // Same as: window.localStorage.getItem("greet");

// Remove item
delete localStorage.greet;  // Same as: window.localStorage.removeItem("greet");

// Clear storage
localStorage.clear();

Beispiel:

// Store values (Strings, Numbers)
localStorage.hello = "Hello";
localStorage.year  = 2017;    

// Store complex data (Objects, Arrays)
var user = {name:"John", surname:"Doe", books:["A","B"]};
localStorage.user = JSON.stringify( user );

// Important: Numbers are stored as String
console.log( typeof localStorage.year ); // String

// Retrieve values
var someYear = localStorage.year; // "2017"

// Retrieve complex data
var userData = JSON.parse( localStorage.user );
var userName = userData.name; // "John"

// Remove specific data
delete localStorage.year; 

// Clear (delete) all stored data
localStorage.clear();

localStorage-Länge

localStorage.length gibt eine Ganzzahl zurück, die die Anzahl der Elemente im localStorage

Beispiel:

Artikel einstellen

localStorage.setItem('StackOverflow', 'Documentation');
localStorage.setItem('font', 'Helvetica');
localStorage.setItem('image', 'sprite.svg');

Länge bekommen

localStorage.length; // 3