JavaScript
Webblager

Syntax

• localStorage.setItem (namn, värde);

• localStorage.getItem (namn);

• localStorage.name = värde;

• localStorage.name;

• localStorage.clear ()

• localStorage.removeItem (namn);

parametrar

Anmärkningar

Med hjälp av localStorage

LocalStorage-objektet ger en bestående (men inte permanent - se gränser nedan) nyckelvärde lagring av strängar. Eventuella ändringar syns omedelbart i alla andra fönster / ramar från samma ursprung. De lagrade värdena kvarstår på obestämd tid om inte användaren rensar sparade data eller konfigurerar en utgångsgräns. localStorage använder ett kartliknande gränssnitt för att få och ställa in värden.

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

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

Om du vill lagra enkla strukturerade data kan du använda JSON för att serialisera dem till och från strängar för lagring.

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-gränser i webbläsare

Mobila webbläsare:

Desktop-webbläsare:

Lagringsevenemang

Varje gång ett värde anges i localStorage, kommer en storage att skickas till alla andra windows från samma ursprung. Detta kan användas för att synkronisera tillstånd mellan olika sidor utan att ladda om eller kommunicera med en server. Vi kan till exempel återspegla värdet på ett inmatningselement som stycketext i ett annat fönster:

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

anteckningar

Händelse avfyras inte eller kan fångas under Chrome, Edge och Safari om domänen ändrades via skript.

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

SessionStorage-objektet implementerar samma lagringsgränssnitt som localStorage. Istället för att delas med alla sidor med samma ursprung lagras dock sessionStorage-data separat för varje fönster / flik. Lagrad information kvarstår mellan sidor i det fönstret / fliken så länge den är öppen, men är synlig ingen annanstans.

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

Spara data i sessionStorage

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

Hämta sparade data från sessionStorage

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

Ta bort sparade data från sessionStorage

sessionStorage.removeItem('key')

Rensar lagring

För att rensa lagringen, kör bara

localStorage.clear();

Felförhållanden

De flesta webbläsare, när de är konfigurerade för att blockera kakor, kommer också att blockera localStorage . Försök att använda det kommer att resultera i ett undantag. Glöm inte att hantera dessa ärenden .

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

Om fel inte hanterades skulle programmet sluta fungera korrekt.

Ta bort lagringsobjektet

För att ta bort ett specifikt objekt från webbläsarens lagring (motsatsen till setItem ) använd removeItem

localStorage.removeItem("greet");

Exempel:

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

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

(Samma gäller för sessionStorage )

Enklare sätt att hantera lagring

localStorage , sessionStorage är JavaScript- objekt och du kan behandla dem som sådana.
Istället för att använda lagringsmetoder som .getItem() , .setItem() osv ... här är ett enklare alternativ:

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

Exempel:

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

lokal lagringslängd

localStorage.length egenskapen returnerar ett heltal som anger antalet element i localStorage

Exempel:

Ställ in objekt

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

Få längd

localStorage.length; // 3