JS Dev

Local storage

1 min čtení

Local storage je jeden ze způsobů1 jak v prohlížeči uchovat data, i když zavřeš záložku.

V prohlížeči najdeš všechno uložený v developer toolech v záložce “Application”.

Hodnoty jsou vždycky string

Ať už ukládáš, nebo načítáš data, musíš je vždycky převést na/ze string, i když se to tváří v devtoolech jinak.

setItem() - ukládání dat

Dokumentace

Na nějakej klíč ukládáš hodnotu (string).

Když chceš uložit objekt, musíš ho nejdřív převést na string.

localStorage.setItem("key", "value");
 
localStorage.setItem("user", JSON.stringify({
    username: "Jakub",
    password: "asd"
}));

Klidně si tam ulož i array, ale stejně ho musíš převést na string.

getItem() - načítání dat

Dokumentace

Dej si bacha. getItem vrací data jako string, ale když tam ten klíč není, vrací null. Musíš si na to udělat if.

Když sis tam předtím uložil*a array nebo object, musíš si ho ze stringu převést.

localStorage.setItem("user", JSON.stringify({
    username: "Jakub",
    password: "asd"
}));
 
const user = localStorage.getItem("user");
console.log(typeof user); // string
console.log(JSON.parse(user)); // {username: 'Jakub', password: 'asd'}

removeItem() - smazání jednoho klíče

Dokumentace

localStorage.setItem("key", "value");
console.log(localStorage.getItem("key")); // value
 
localStorage.removeItem("key");
console.log(localStorage.getItem("key")); // null

clear() - smazání všech klíčů

Dokumentace

localStorage.setItem("key", "value");
localStorage.setItem("key2", "value2");
 
localStorage.clear();
 
console.log(localStorage.getItem("key")); // null
console.log(localStorage.getItem("key2")); // null

Footnotes

  1. Můžeš data ukládat i do cookies, indexedDB nebo sessionStorage. ↩

Graf