HTML5 - Web Storage (pohrana)

Šta je Web Storage?

Funkcija web pohrane u HTML5 omogućava vam da lokalno pohranite neke podatke na računaru korisnika, slično kolačićima, ali su brži i mnogo bolji od kolačića. Međutim, web pohrana nije ništa sigurnija od PHP kolačića. Informacije pohranjene u web storage ne šalju se web serveru, za razliku od kolačića u kojima se podaci šalju serveru uz svaki zahtjev. Takođe, razlika je u tome što vam kolačići omogućava pohranu male količine podataka (gotovo 4KB), web pohrana omogućava pohranjivanje do 5MB podataka. Postoje dvije vrste web pohrane koje se razlikuju po opsegu i vijeku trajanja:

  • Lokalna memorija (Local storage) - Lokalna memorija koristi objekt localStorage za trajno čuvanje podataka za cijelu web lokaciju. To znači da će pohranjeni lokalni podaci biti dostupni sljedeći dan, sljedeću sedmicu ili iduću godinu, osim ako ih ne uklonite.

  • Pohrana sesije (Session storage) - Pohrana sesije koristi objekt sessionStorage za privremeno čuvanje podataka za jedan prozor ili karticu pretraživača. Podaci nestaju po završetku sesije, tj. kada korisnik zatvori taj prozor ili karticu pretraživača.

Objekt localStorage

Kao što je ranije rečeno, localStorage objekt pohranjuje podatke bez datuma isteka. Svaki dio podataka pohranjen je u paru ključ/vrijednost. Ključ identifikuje ime informacije (poput 'first_name'), a vrijednost je pridružena tom ključu (recimo 'Petar'). Evo primjera: 

<script>
// Provjeri da li localStorage objekat postoji
if(localStorage) {
    // Pohranite podatke
    localStorage.setItem("first_name", "Peter");
    
    // Dohvati podatke
    alert("Ćao, " + localStorage.getItem("first_name"));
} else {
    alert("Žao nam je, vaš pretraživač ne podržava lokalnu pohranu.");
}
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pohranjivanje podataka s HTML5 - lokalna pohrana</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// Provjera da li localStorage objekt postoji
if(localStorage) {
  $(document).ready(function() {
    $(".save").click(function() {
      // Dobijte ime unosa
      var firstName = $("#firstName").val();
      
      // Pohrani podatke
        localStorage.setItem("first_name", firstName);
      alert("Vaše ime je sačuvano.");
    });
    $(".access").click(function() {
      // Preuzimanje podataka
        alert("Ćao, " + localStorage.getItem("first_name"));
    });
  });
} else {
    alert("Žao nam je, vaš pretraživač ne podržava lokalnu pohranu.");
}
</script>
</head>
<body>
    <form>
      <label>Upiši svoje ime: <input type="text" id="firstName"></label>
        <button type="button" class="save">Sačuvaj ime</button>
        <button type="button" class="access">Prikaži vrijednost</button>
    </form>
</body>
</html>

Objašnjeni primjer:

Gornji JavaScript kod ima sljedeće značenje:

  • localStorage.setItem (ključ/vrijednost) pohranjuje vrijednost pridruženu ključu.
  • localStorage.getItem (ključ) dohvata vrijednost povezanu s ključem.

Takođe možete ukloniti određenu stavku iz memorije ako postoji, prosljeđivanjem imena ključa metodi removeItem(), poput localStorage.removeItem ("first_name"). Međutim, ako želite ukloniti kompletnu pohranu, koristite metodu clear(), poput localStorage.clear(). Metoda clear() ne uzima nikakve argumente i jednostavno briše sve parove ključ/vrijednost od localStorage odjednom, pa dobro razmislite prije nego što je upotrijebite.


Objekt sessionStorage

Objekt sessionStorage radi na isti način kao i localStorage, osim što pohranjuje podatke samo za jednu sesiju, tj. podaci ostaju sve dok korisnik ne zatvori taj prozor ili karticu. 

<script>
// Provjerava da li sessionStorage objekt postoji
if(sessionStorage) {
    // Pohranite podatke
    sessionStorage.setItem("last_name", "Parker");
    
    // Dohvati podatke
    alert("Ćao, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
} else {
    alert("Žao nam je, vaš pretraživač ne podržava pohranu sesija.");
}
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pohranjivanje podataka s HTML5 - pohrana sesija</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// Provjera da li localStorage objekt postoji
if(localStorage) {
  $(document).ready(function() {
    $(".save").click(function() {
      // Dobijte ime unosa
      var lastName = $("#lastName").val();
      
      // Pohrani podatke
        sessionStorage.setItem("last_name", lastName);
      alert("Vaše ime je sačuvano.");
    });
    $(".access").click(function() {
      // Preuzimanje podataka
        alert("Ćao, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
    });
  });
} else {
    alert("Žao nam je, vaš pretraživač ne podržava lokalnu pohranu.");
}
</script>
</head>
<body>
    <form>
      <label>Upiši svoje prezime: <input type="text" id="lastName"></label>
        <button type="button" class="save">Sačuvaj prezime</button>
        <button type="button" class="access">Prikaži vrijednost</button>
    </form>
</body>
</html>