Skip to content

Data opslag in de web-browser

Als je website bouwt hoef je natuurlijk niet alle data op te slaan in een database. Je kunt data ook ‘lokaal’ opslaan in de data opslag van de webbrowser zelf. In de web-browser zijn er verschillende vormen van data opslag:

  • Cookies
  • LocalStorage
  • SessionStorage
  • IndexedDB

Cookies

Cookies zijn kleine stukjes data die door websites worden opgeslagen in de browser. Ze worden bijvoorbeeld gebruikt voor het opslaan van gebruikersdata (bijvoorbeeld een persoonlijk id) zijn (tracking-cookies).

Je kunt cookie data sturen van een server naar de opslag van de browser: dit gaat via een ‘Set-Cookie’ HTTP response header. Met JavaScript kun je deze cookie data ‘uitlezen’ en gebruiken. Hieronder een JavaScript voorbeeld van het ‘schrijven’ en ‘lezen’ van de cookie data:

// Write data in a cookie
document.cookie = "username=Jan; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// Read data from a cookie
const cookies = document.cookie;
console.log(cookies);

Cookies zijn kleine stukjes data die door websites worden opgeslagen in de browser van de gebruiker. Ze hebben verschillende toepassingen, waaronder sessiebeheer, personalisatie en tracking. Hier is een uitleg over de verschillen tussen deze drie toepassingen:

  • Sessiebeheer: Houdt de status van de gebruiker bij tijdens een enkele sessie (bijv. ingelogd blijven).
  • Personalisatie: Onthoudt gebruikersvoorkeuren voor toekomstige bezoeken (bijv. taalinstellingen).
  • Tracking: Volgt gebruikersgedrag over meerdere sessies en websites heen voor marketingdoeleinden (bijv. gerichte advertenties).

LocalStorage

LocalStorage biedt een eenvoudige manier om gegevens op te slaan in de webbrowser. Gegevens in LocalStorage blijven behouden, zelfs nadat de browser is gesloten en opnieuw is geopend. Het is ideaal voor het opslaan van permanente gegevens.

// Store data in LocalStorage
localStorage.setItem('username', 'Jan');

// Retrieve data from LocalStorage
const username = localStorage.getItem('username');
console.log(username);

// Remove data from LocalStorage
localStorage.removeItem('username');

// Remove all data from localStorage
localStorage.clear();

Als je object of array (JSON) data in de localStorage wilt opslaan is het handig om te weten dat je deze data eerst dient om te zetten naar een ‘string’ (tekst) formaat voordat je dit wegschrijft. Dit doe je met de functie ‘JSON.stringify’. Als je de ‘string’ data uit de localStorage haalt kun je deze weer omzetten naar een ‘object’ of een ‘array’ door deze om te zetten met de functie ‘JSON.parse’.

const testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage with JSON.stringify
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
const retrievedObjectString = localStorage.getItem('testObject') // returns string;

console.log('retrievedObjectString: ', retrievedObjectString, ', type: ', typeof retrievedObjectString);
// Convert string back to object
const retrievedObject = JSON.parse(retrievedObjectString);

console.log('retrievedObject: ', retrievedObject, ', type: ', typeof retrievedObject);

SessionStorage

SessionStorage is vergelijkbaar met LocalStorage, maar de opgeslagen gegevens zijn alleen beschikbaar voor de duur van de huidige sessie. Zodra de browser of een tabblad wordt gesloten, worden de gegevens van de sessie verwijderd.

// Store data in SessionStorage
sessionStorage.setItem('sessionUser', 'Jan');

// Gegevens ophalen uit SessionStorage
const sessionUser = sessionStorage.getItem('sessionUser');
console.log(sessionUser);

// Remove data from  SessionStorage
sessionStorage.removeItem('sessionUser');

// Remove all data from SessionStorage
sessionStorage.clear();

IndexedDB

IndexedDB is een krachtig en eenvoudige API voor het opslaan van grote hoeveelheden gestructureerde gegevens, inclusief bestanden en blobs. Het biedt ondersteuning voor transacties en indexing, waardoor het geschikt is voor complexe toepassingen.

// Create a new database or open an existing one
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('users', { keyPath: 'id' });
  objectStore.createIndex('name', 'name', { unique: false });
};

request.onsuccess = function(event) {
  const db = event.target.result;

  // Start a transaction to get access to the object store
  const transaction = db.transaction('users', 'readwrite');
  const objectStore = transaction.objectStore('users');

  // Add data
  const user = { id: 1, name: 'Jan' };
  const addRequest = objectStore.add(user);

  addRequest.onsuccess = function() {
    console.log('User added to the database');
  };
};

(Web) Developer Tools

Met de ‘(Web) Developer Tools’ of ‘DevTools’ van je browser kun je zien wat er voor data er opgeslagen staat. En je kunt de opgeslagen data bewerken of wissen als je dat nodig vindt. Deze ‘Developer Tools’ kun je openen via het hoofd-menu van de browser, en dan onder ‘More Tools’. Of je klikt met de rechter-muisknop op een webpagina en selecteert de optie ‘Inspect(eer)’.

In browser ‘FireFox’ kun je de data opslag vinden onder de tab ‘Storage’. In de browser ‘Chrome’ kun je de opslag vinden onder de tab ‘Application’.

Bronnen