JavaScript
Webopslag

Syntaxis

• localStorage.setItem (naam, waarde);

• localStorage.getItem (name);

• localStorage.name = waarde;

• localStorage.name;

• localStorage.clear ()

• localStorage.removeItem (name);

parameters

Opmerkingen

LocalStorage gebruiken

Het localStorage-object biedt blijvende (maar niet permanente - zie limieten hieronder) sleutelwaardeopslag van tekenreeksen. Alle wijzigingen zijn onmiddellijk zichtbaar in alle andere vensters / frames van dezelfde oorsprong. De opgeslagen waarden blijven voor onbepaalde tijd behouden, tenzij de gebruiker opgeslagen gegevens wist of een vervallimiet configureert. localStorage gebruikt een kaartachtige interface voor het ophalen en instellen van waarden.

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

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

Als u eenvoudige gestructureerde gegevens wilt opslaan, kunt u JSON gebruiken om deze van en naar tekenreeksen voor opslag te serialiseren.

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-limieten in browsers

Mobiele browsers:

Desktop browsers:

Opslaggebeurtenissen

Wanneer een waarde wordt ingesteld in localStorage, wordt een storage verzonden naar alle andere windows van dezelfde oorsprong. Dit kan worden gebruikt om de status tussen verschillende pagina's te synchroniseren zonder opnieuw te laden of te communiceren met een server. We kunnen bijvoorbeeld de waarde van een invoerelement weergeven als alineatekst in een ander venster:

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;
  }
});

Notes

Evenement wordt niet geactiveerd of te vangen onder Chrome, Edge en Safari als domein via script is gewijzigd.

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

Het sessionStorage-object implementeert dezelfde opslaginterface als localStorage. In plaats van te worden gedeeld met alle pagina's van dezelfde oorsprong, worden sessionStorage-gegevens echter apart opgeslagen voor elk venster / tabblad. Opgeslagen gegevens blijven tussen pagina's in dat venster / tabblad staan zolang deze geopend zijn, maar zijn nergens anders zichtbaar.

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);
};

Gegevens opslaan in sessionStorage

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

Krijg opgeslagen gegevens van sessionStorage

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

Verwijder opgeslagen gegevens uit sessionStorage

sessionStorage.removeItem('key')

Opslag wissen

Om de opslag te wissen, voert u gewoon uit

localStorage.clear();

Foutcondities

De meeste browsers, wanneer geconfigureerd om cookies te blokkeren, zullen ook localStorage blokkeren. Pogingen om het te gebruiken resulteren in een uitzondering. Vergeet deze zaken niet te beheren .

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

Als er geen fouten worden afgehandeld, werkt het programma niet meer goed.

Verwijder opslagitem

Gebruik removeItem om een specifiek item uit de browser Opslag (het tegenovergestelde van setItem ) te verwijderen

localStorage.removeItem("greet");

Voorbeeld:

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

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

(Hetzelfde geldt voor sessionStorage )

Eenvoudigere manier van omgaan met opslag

localStorage , sessionStorage zijn JavaScript- objecten en u kunt ze als zodanig behandelen.
In plaats van opslagmethoden zoals .getItem() , .setItem() , enz. Te gebruiken, is hier een eenvoudiger alternatief:

// 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();

Voorbeeld:

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

eigenschap localStorage.length retourneert een geheel getal dat het aantal elementen in de localStorage

Voorbeeld:

Items instellen

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

Krijg lengte

localStorage.length; // 3