Local Storage

Često želimo spremiti podatke u browseru

Kada i zašto koristit localStorage

  • caching
  • small auth token
  • nikad se ne šalje na server
  • togglanje light/dark mode

nema expiration date

  • traje i nakon zatvaranja browsera i taba (za razliku od cookie)
  • nestaje tek kada user izbriše cache ili kad aplikacije obrišu item ili cijeli localStorage

Spremanje podataka u browseru od usera

"The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions." - MDN

metode

localStorage.setItem("ime", "antonija");

setItem()

vidljivo samo kod trenutnog usera

Primjer

https://tonkec.github.io/pick_me/

Kako izgleda u browseru?

Demo

Zadatak

1. deklariraj varijablu ime
2. postavi ju u localStorage
3. pogledaj u browseru localStorage

localStorage.getItem("ime");

getItem()

clear()

  localStorage.clear();

Kako spremiti objekt?

const user = {name: "antonija", age: 30};
const userStringified = JSON.stringify(user);
localStorage.setItem("user", userStringified);

setItem()

const user = localStorage.getItem("user");
JSON.parse(user);

getItem()

Zadatak

1. napravi objekt grad

2. dodaj mu properties ime i zip code
3. spremi grad u localStorage

Zadatak

1. napravi array users

2. assignaj mu listu objekata

3. svaki objekt treba imati ime i active(true/false)

4. spremi users u localStorage

Zadaća

Pogledaj video

Pročitaj članke

Zadatak

  • napravi input field
  • dodaj button
  • kad se upiše ime u input field i klikne button, ime se treba spremiti u localStorage
  • kad se stranica učita, trebaju se prikazati sva imena u jednom <ul>
  • dodaj button koji će obrisati cijeli localStorage

Ako želiš znati više

https://javascript.info/localstorage

Made with Slides.com