Objekty localStorage, sessionStorage

Webové ukládací objekty localStorage a sessionStorage umožňují ukládat v prohlížeči dvojice klíč/hodnota.

Zajímavé na nich je to, že data pÅ™ežijí znovunačtení stránky (u sessionStorage) a dokonce kompletní restart prohlížeče (u localStorage). Velmi brzy to uvidíme.

K čemu jsou další objekty, když už máme cookies?

• Na rozdíl od cookies nejsou webové ukládací objekty s každým požadavkem odesílány na server. Z toho důvodu do nich můžeme uložit mnohem více dat. VÄ›tÅ¡ina moderních prohlížečů dovoluje nejménÄ› 5 megabytů dat (nebo více) a umožňuje to konfigurovat ve svých nastaveních.
• Rovněž na rozdíl od cookies nemůže server manipulovat s ukládacími objekty pomocí HTTP hlaviček. VÅ¡echno se provádí v JavaScriptu.
• ÚložiÅ¡tÄ› je vázáno na původ (trojice doména/protokol/port). To znamená, že různé protokoly nebo subdomény vytvářejí různé ukládací objekty a nemohou vzájemnÄ› pÅ™istupovat ke svým datům.

Oba ukládací objekty poskytují stejné metody a vlastnosti:

• setItem(klíč, hodnota) – uloží dvojici klíč/hodnota.
• getItem(klíč) – vrátí hodnotu podle klíče.
• removeItem(klíč) – odstraní klíč s jeho hodnotou.
• clear() – vymaže vÅ¡e.
• key(index) – vrátí klíč na zadané pozici.
• length – počet uložených dvojic.

Jak vidíte, podobají se kolekci Map (setItem/getItem/removeItem), ale navíc umožňují přístup podle indexu metodou key(index).

Podívejme se, jak to funguje.

Demo pro localStorage

Hlavní vlastnosti localStorage jsou:

• Je sdílen mezi vÅ¡emi záložkami a okny stejného původu.
• Data neexpirují. Zůstanou uložena po restartu prohlížeče a dokonce i po restartu operačního systému.

Když si například spustíte tento kód…

localStorage.setItem('test', 1);

…a zavřete a pak otevřete prohlížeč nebo jen otevřete stejnou stránku v jiném okně, můžete získat uložená data takto:

alert( localStorage.getItem('test') ); // 1

Musíme jen být na stejném původu (doména/protokol/port), URL cesta se může lišit.

Objekt localStorage sdílejí vÅ¡echna okna se stejným původem, takže pokud nastavíme data v jednom oknÄ›, zmÄ›na bude viditelná i v ostatních.

Objektový přístup

Načítat a ukládat klíče můžeme i čistě objektovým přístupem, například:

// uložení klíče
localStorage.test = 2;

// načtení klíče
alert( localStorage.test ); // 2

// odstranění klíče
delete localStorage.test;

Z historických důvodů je to dovoleno a většinou to funguje, ale obecně se to nedoporučuje, protože:

1. Jestliže je klíč generován uživatelem, může jím být cokoli, napÅ™. length, toString nebo název jiné zabudované metody localStorage. V takovém případÄ› getItem/setItem fungují dobÅ™e, ale objektový přístup selže:

   let klíč = 'length';
   localStorage[klíč] = 5; // Chyba, nelze nastavit vlastnost length

2. Existuje událost storage, která se spustí pÅ™i zmÄ›nÄ› dat. PÅ™i objektovém přístupu se tato událost nespustí. Uvidíme to pozdÄ›ji v této kapitole.

Cyklus nad klíči

Jak jsme viděli, tyto metody poskytují funkcionalitu „načti/ulož/odstraň klíč“. Ale jak získat všechny uložené hodnoty nebo klíče?

Naneštěstí ukládací objekty nejsou iterovatelné.

Jedním způsobem je procházet je v cyklu jako pole:

for(let i=0; i<localStorage.length; i++) {
  let klíč = localStorage.key(i);
  alert(`${klíč}: ${localStorage.getItem(klíč)}`);
}

Dalším způsobem je použít cyklus for klíč in localStorage, stejnÄ› jako u běžných objektů.

Ten iteruje nad klíči, ale také vypíše několik zabudovaných polí, která nepotřebujeme:

// špatný pokus
for(let klíč in localStorage) {
  alert(klíč); // zobrazí getItem, setItem a jiné zabudované věci
}

…Musíme tedy buď odfiltrovat pole z prototypu kontrolou hasOwnProperty:

for(let klíč in localStorage) {
  if (!localStorage.hasOwnProperty(klíč)) {
    continue; // přeskakuje klíče jako "setItem", "getItem" atd.
  }
  alert(`${klíč}: ${localStorage.getItem(klíč)}`);
}

…Nebo prostÄ› načíst „vlastní“ klíče pomocí Object.keys a pak nad nimi spustit cyklus, je-li to zapotÅ™ebí:

let klíče = Object.keys(localStorage);
for(let klíč of klíče) {
  alert(`${klíč}: ${localStorage.getItem(klíč)}`);
}

To funguje, protože Object.keys vrátí jen klíče, které náleží objektu, a ignoruje prototyp.

Pouze řetězce

Prosíme všimněte si, že klíč i hodnota musejí být řetězce.

Pokud jsou jiného typu, například číslo nebo objekt, budou automaticky převedeny na řetězec:

localStorage.uživatel = {jméno: "Jan"};
alert(localStorage.uživatel); // [object Object]

Můžeme ovÅ¡em k ukládání objektů použít JSON:

localStorage.uživatel = JSON.stringify({jméno: "Jan"});

// o něco později
let uživatel = JSON.parse( localStorage.uživatel );
alert( uživatel.jméno ); // Jan

Je také možné převést na řetězec celý ukládací objekt, např. pro účely ladění:

// do JSON.stringify přidáme formátovací možnosti, aby objekt vypadal lépe
alert( JSON.stringify(localStorage, null, 2) );

sessionStorage

Objekt sessionStorage se používá výraznÄ› ménÄ› často než localStorage.

Jeho vlastnosti a metody jsou stejné, ale objekt je mnohem omezenější:

• Objekt sessionStorage existuje jedinÄ› uvnitÅ™ aktuální záložky prohlížeče.
  • Další záložka se stejnou stránkou bude mít jiné úložiÅ¡tÄ›.
  • Objekt je vÅ¡ak sdílen mezi vnitÅ™ními rámy ve stejné záložce (za pÅ™edpokladu, že pocházejí ze stejného původu).
• Data pÅ™ežijí znovunačtení stránky, ale ne zavÅ™ení a otevÅ™ení záložky.

Podívejme se na to v akci.

Spusťte si tento kód…

sessionStorage.setItem('test', 1);

…Pak aktualizujte stránku. Nyní stále můžete získat data:

alert( sessionStorage.getItem('test') ); // po aktualizaci: 1

…Ale pokud si otevÅ™ete tutéž stránku v jiné záložce a zkusíte to znovu tam, uvedený kód vrátí null, což znamená „nic nenalezeno“.

Je to proto, že sessionStorage je vázán nejen na původ, ale i na záložku prohlížeče. Z toho důvodu se sessionStorage používá zřídkakdy.

Událost storage

Když jsou data v localStorage nebo sessionStorage zmÄ›nÄ›na, spustí se událost storage s následujícími vlastnostmi:

• key – klíč, který byl zmÄ›nÄ›n (null, pokud bylo voláno .clear()).
• oldValue – původní hodnota (null, pokud byl pÅ™idán nový klíč).
• newValue – nová hodnota (null, pokud byl klíč odstranÄ›n).
• url – URL dokumentu, na nÄ›mž ke zmÄ›nÄ› doÅ¡lo.
• storageArea – objekt localStorage nebo sessionStorage, v nÄ›mž ke zmÄ›nÄ› doÅ¡lo.

Důležité je, že tato událost se spustí na vÅ¡ech objektech window, v nichž je úložiÅ¡tÄ› dostupné, kromÄ› toho, který ji způsobil.

Vysvětlíme to.

PÅ™edstavte si, že máte dvÄ› okna a v obou je stejné sídlo. Objekt localStorage je tedy sdílen obÄ›ma.

Možná budete chtít otevřít si tuto stránku ve dvou oknech prohlížeče, abyste otestovali následující kód.

Jestliže obÄ› okna naslouchají window.onstorage, pak každé bude reagovat na zmÄ›ny, ke kterým doÅ¡lo ve druhém oknÄ›.

// spustí se při změnách, které byly učiněny ve stejném úložišti z jiných dokumentů
window.onstorage = událost => { // můžeme použít i window.addEventListener('storage', událost => {
  if (událost.key != 'nyní') return;
  alert(událost.key + ':' + událost.newValue + " na " + událost.url);
};

localStorage.setItem('nyní', Date.now());

Prosíme vÅ¡imnÄ›te si, že událost také obsahuje událost.url – URL dokumentu, v nÄ›mž byla data zmÄ›nÄ›na.

Navíc událost.storageArea obsahuje ukládací objekt – tato událost je stejná pro sessionStorage i pro localStorage, takže událost.storageArea se odkazuje na objekt, který byl zmÄ›nÄ›n. Můžeme v nÄ›m dokonce chtít nÄ›co nastavit, abychom na zmÄ›nu „odpovÄ›dÄ›li“.

To umožňuje různým oknům stejného původu vyměňovat si zprávy.

Moderní prohlížeče podporují také Broadcast Channel API, speciální API pro komunikaci mezi okny stejného původu. Má více schopností, ale je ménÄ› podporováno. Existují knihovny, které provádÄ›jí polyfill tohoto API založený na localStorage, díky nÄ›muž je dostupné vÅ¡ude.

Shrnutí

Webové ukládací objekty localStorage a sessionStorage umožňují v prohlížeči ukládat dvojice klíč/hodnota.

• Jak klíč, tak hodnota musejí být Å™etÄ›zce.
• Omezení velikosti je 5 MB nebo více, závisí na prohlížeči.
• Tato data neexpirují.
• Data jsou vázána na původ (doména/protokol/port).

API:

• setItem(klíč, hodnota) – uloží dvojici klíč/hodnota.
• getItem(klíč) – vrátí hodnotu podle klíče.
• removeItem(klíč) – odstraní klíč s jeho hodnotou.
• clear() – vymaže vÅ¡e.
• key(index) – vrátí klíč na pozici index.
• length – počet uložených dvojic.
• K získání vÅ¡ech klíčů použijte Object.keys.
• Ke klíčům pÅ™istupujeme jako k vlastnostem objektu, v takovém případÄ› se nespustí událost storage.

Událost storage:

• Spustí se pÅ™i volání setItem, removeItem, clear.
• Obsahuje vÅ¡echna data o provádÄ›né operaci (key/oldValue/newValue), url dokumentu a ukládací objekt storageArea.
• SpouÅ¡tí se na vÅ¡ech objektech window, které mají přístup k úložiÅ¡ti, s výjimkou toho, který ji vygeneroval (uvnitÅ™ záložky u sessionStorage, globálnÄ› u localStorage).