Jelena Petkovic

Posted on Oct 1

Sveobuhvatan Vodič za Čuvanje Podataka u JavaScript-u

#javascript #data #webdev

U savremenom razvoju web aplikacija, efikasno čuvanje podataka na klijentskoj strani je ključno za poboljšanje korisničkog iskustva i performansi aplikacije. Ovaj post pruža detaljno objašnjenje različitih metoda čuvanja podataka u JavaScript-u, uključujući cookies, local storage, session storage i IndexedDB. Takođe ćemo pokriti najbolje prakse, bezbednost, performanse i reaktivne pristupe.

1. Cookies

Kako funkcionišu Cookies?

Cookies su male datoteke koje server šalje klijentskom pretraživaču, a koje se čuvaju lokalno na korisničkom uređaju. Koriste se za različite svrhe, uključujući autentifikaciju, praćenje sesija i čuvanje korisničkih preferencija.

Gde se koristi Cookies?

Autentifikaciju: Cookies često čuvaju tokene za prijavu (npr. JWT) ili sesije, tako da korisnici ostaju prijavljeni čak i kada osveže stranicu ili posete sajt nakon nekog vremena.
Praćenje korisnika: Koriste se za praćenje korisničkih aktivnosti na više sajtova (često za ciljanje oglasa ili analitiku).
Personalizacija: Čuvanje korisničkih preferencija (npr. jezik sajta, tema) kako bi sajt mogao da prilagodi sadržaj sledeći put kada ga posetite.

Primer upotrebe:
Kada se korisnik prijavi na sajt, server može da pošalje cookie sa tokenom za sesiju. Svaki sledeći zahtev ka serveru koristi taj cookie za potvrdu identiteta.

Prednosti Cookies-a

Cookies mogu imati datum isteka, što znači da se automatski brišu kada više nisu potrebni. Ovo je korisno za čuvanje privremenih informacija.
Cookies se šalju sa svakim HTTP zahtevom, što ih čini pogodnim za autentifikaciju korisnika i praćenje sesija.

Mane Cookies-a

Ograničeni su na otprilike 4KB po cookie-ju, što može biti nedovoljno za veće količine podataka.
Prekomerna upotreba cookies-a može usporiti performanse, posebno ako se često šalju sa HTTP zahtevima.

Primer korišćenja Cookies-a

Instalirajte biblioteku js-cookie za lakše upravljanje cookies-ima:

npm install js-cookie

import Cookies from 'js-cookie';

// Čuvanje korisničkog imena 7 dana
Cookies.set('username', 'Jelena', { expires: 7 });

// Čitanje korisničkog imena
const username = Cookies.get('username');

// Brisanje korisničkog imena
Cookies.remove('username');

2. Local Storage

Kako funkcioniše Local Storage?

Local storage omogućava čuvanje podataka u klijentskom pretraživaču bez datuma isteka. Ovo znači da podaci ostaju dostupni između sesija, što ga čini idealnim za dugotrajne informacije.

Gde se koristi Local Storage?

Čuvanje podataka koji treba da traju duže: Može se koristiti za čuvanje podataka koji ostaju sačuvani i nakon zatvaranja prozora bruzera, poput korisničkih preferencija ili postavki sajta.
Keširanje podataka: Može se koristiti za keširanje odgovora sa servera ili sadržaja kako bi se smanjio broj zahteva prilikom ponovnih poseta sajtu.

Primer upotrebe:
Aplikacija za upravljanje zadacima može čuvati listu zadataka u localStorage, tako da se zadržavaju i nakon što korisnik zatvori ili osveži stranicu.

Prednosti Local Storage-a

Local storage može da čuva do 5-10MB podataka, što je znatno više od cookies-a.
Podaci ostaju dostupni između sesija, čime se omogućava dugotrajno skladištenje informacija.

Mane Local Storage-a

Local storage ne može slati podatke sa HTTP zahtevima, što ga čini manje pogodnim za autentifikaciju.
Podaci nisu enkriptovani i lako su dostupni putem JavaScript-a, što može predstavljati rizik.

Primer korišćenja Local Storage-a

// Čuvanje korisničkog imena
localStorage.setItem('username', 'Jelena');

// Čitanje korisničkog imena
const username = localStorage.getItem('username');

// Brisanje korisničkog imena
localStorage.removeItem('username');

3. Session Storage

Kako funkcioniše Session Storage?

Session storage je sličan local storage-u, ali se podaci čuvaju samo za vreme trajanja sesije. Kada se prozori zatvore, podaci se brišu, čime se osigurava privatnost.

Gde se koristi Session Storage?

Privremeno čuvanje korisničkih podataka: Na primer, ako korisnik popunjava višeformni obrazac kroz više stranica, sessionStorage se može koristiti za čuvanje unosa korisnika između stranica.
Privremeno stanje aplikacije: Kada je potrebno čuvati podatke dok korisnik ne osveži ili zatvori stranicu, na primer za pamćenje korisničkih akcija koje su relevantne samo tokom trenutne posete sajtu.

Primer upotrebe:
Kod online prodavnica, podaci o artiklima u korpi mogu se čuvati u sessionStorage dok korisnik ne dovrši proces kupovine. Kada zatvori tab, podaci se brišu.

Prednosti Session Storage-a

Podaci se ne čuvaju između sesija, što je idealno za privremene informacije.
Kao i local storage, session storage ima kapacitet 5-10MB.

Mane Session Storage-a

Ne može se koristiti za dugotrajno skladištenje podataka, što ga čini manje pogodnim za aplikacije koje zahtevaju trajno čuvanje informacija.

Primer korišćenja Session Storage-a

// Čuvanje korisničkog imena
sessionStorage.setItem('username', 'Jelena');

// Čitanje korisničkog imena
const username = sessionStorage.getItem('username');

// Brisanje korisničkog imena
sessionStorage.removeItem('username');

4. IndexedDB

Kako funkcioniše IndexedDB?

IndexedDB asinhrona baza podataka sa ključevima i vrednostima, zasnovana na objektima koja omogućava skladištenje velike količine podataka direktno u korisnikovom pregledaču. Podaci se čuvaju u indeksiranoj bazi, što omogućava brzo pretraživanje i organizaciju. Podaci se organizuju u objektne prodavnice (object stores) koje su slične tabelama u SQL bazama podataka. Svaka objektna prodavnica ima kolekciju zapisa gde se svaki zapis identifikuje putem ključa. IndexedDB je JavaScript API i deo je standarda HTML5, te je podržan u većini modernih pregledača.

Gde se koristi IndexedDB?

Web aplikacije koje rade offline: IndexedDB omogućava aplikacijama da nastave da rade čak i kada nema internet konekcije tako što omogućava čuvanje podataka lokalno.
Složeni podaci: Može da se koristi za čuvanje složenih struktura podataka poput objekata, nizova, i binarnih podataka, što je pogodno za aplikacije koje rade sa velikim količinama podataka.
Keširanje podataka: Može da služi za keširanje podataka radi ubrzavanja učitavanja i smanjenja opterećenja servera.
Progresivne web aplikacije (PWA): IndexedDB je često korišćen u PWA aplikacijama za sinhronizaciju podataka i podršku za offline rad.

Osnovni koncepti i operacije u IndexedDB:

Baza podataka (Database): Sadrži više objektnih prodavnica.
Objektna prodavnica (Object Store): Sadrži podatke kao što su objekti ili druge strukture podataka.
Transakcije (Transaction): Svaka operacija nad bazom podataka (čitanje, pisanje) mora biti unutar transakcije.
Indeksi (Indexes): Koriste se za efikasnije pretraživanje podataka unutar objektne prodavnice.
Ključevi (Keys): Identifikuju svaki zapis unutar objektne prodavnice.

Prednosti IndexedDB?

Može da skladišti veće količine podataka (do nekoliko GB) u poređenju sa drugim opcijama kao što su LocalStorage ili SessionStorage.
Podržava čuvanje kompleksnih struktura podataka kao što su objekti, slike, video zapisi i druge vrste binarnih podataka.
Većina operacija je asinhrona, što omogućava da se aplikacije ne blokiraju dok se podaci čitaju ili pišu.
Podržava transakcijski model koji osigurava integritet podataka i omogućava rollback u slučaju greške.

Mane IndexedDB-a

API za IndexedDB je komplikovaniji od drugih metoda, što može zahtevati više vremena za učenje i implementaciju.

Primer korišćenja IndexedDB-a

// Otvaranje ili kreiranje baze podataka
let request = indexedDB.open('MyDatabase', 1);

// Event handler za kreiranje novih objektnih prodavnica
request.onupgradeneeded = function(event) {
    let db = event.target.result;
    // Kreiranje objektne prodavnice sa ključem po imenu
    db.createObjectStore('users', { keyPath: 'id' });
};

// Event handler za uspešno otvaranje baze
request.onsuccess = function(event) {
    let db = event.target.result;

    // Kreiranje transakcije i pristupanje objektnoj prodavnici
    let transaction = db.transaction('users', 'readwrite');
    let objectStore = transaction.objectStore('users');

    // Dodavanje podataka
    let addRequest = objectStore.add({ id: 1, name: 'Jelena', age: 32 });

    addRequest.onsuccess = function() {
        console.log('Podatak uspešno dodat');
    };

    // Čitanje podataka
    let getRequest = objectStore.get(1);
    getRequest.onsuccess = function(event) {
        console.log('Pročitani podaci:', event.target.result);
    };
};

request.onerror = function() {
    console.log('Greška prilikom otvaranja baze');
};

Najbolje Prakse za Korišćenje

Cookies

Minimalizujte podatke: Čuvajte samo neophodne informacije da biste smanjili veličinu cookies-a.
Sigurnost: Koristite Secure i HttpOnly atribute kako biste zaštitili cookies od neovlašćenog pristupa.
Smanjite trajanje: Postavite razuman datum isteka kako biste smanjili rizik od zastarelih podataka.

Local i Session Storage

JSON.stringify() i JSON.parse(): Kada čuvate složene objekte, koristite JSON.stringify() za konverziju objekta u string prilikom čuvanja i JSON.parse() prilikom čitanja.
Organizacija podataka: Koristite jasne i opisne ključeve kako biste olakšali pronalaženje podataka.
Ručna provera: Povremeno proveravajte i brišite neaktuelne ili nepotrebne podatke da biste oslobodili prostor.

Bezbednost

XSS (Cross-Site Scripting): Budite oprezni s podacima koje čuvate. Enkriptujte osetljive podatke pre nego što ih sačuvate.
CORS (Cross-Origin Resource Sharing): Kada šaljete podatke između različitih domena, koristite CORS da biste osigurali da su samo ovlašćeni domeni u mogućnosti da pristupaju vašim resursima.

Performanse

Lazy loading: Prilikom učitavanja podataka iz IndexedDB ili Local Storage, razmotrite korišćenje lazy loading pristupa kako biste smanjili vreme učitavanja.
Batch operacije: Kada radite sa IndexedDB, koristite batch operacije za dodavanje ili ažuriranje više stavki odjednom, čime ćete smanjiti broj transakcija i povećati brzinu.

Reaktivno Čuvanje Podataka

U kombinaciji sa React-om, možete koristiti reaktivne pristupe za čuvanje podataka. Na primer, kreiranje prilagođenog hook-a za rad sa local storage:

import React, { useState, useEffect } from 'react';

const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    const item = window.localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(storedValue));
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
};

const App = () => {
  const [name, setName] = useLocalStorage('name', '');

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <p>Your name is: {name}</p>
    </div>
  );
};

Analiza i Monitoring

Uvek je korisno analizirati i pratiti kako se podaci koriste u aplikaciji. Alati za analizu podataka kao što su Google Analytics ili Mixpanel mogu pomoći u razumevanju interakcija korisnika i optimizaciji sistema za čuvanje podataka.

Zaključak

Razumevanje različitih metoda za čuvanje podataka u JavaScript-u, kao i njihovih prednosti i mana, može značajno poboljšati vašu aplikaciju. Uzimajući u obzir bezbednost, performanse i korisničko iskustvo, možete izabrati pravu metodu za vaše specifične potrebe.

Top comments (1)

Mark Pelf • Oct 1

Ja sam vise na serverskoj strani, nego li na klijentskoj. Ali ima jedna komponenta, datatables.net/ koju koristim koja vrlo vesto sprema "state" na klijentskoj strani.