Kihagyás

Storage

localStorage

Az egyszerű tárolásra használható localStorage objektum a böngészőben tárolja az adatokat. Az adatokat kulcs-érték párokban tárolja, ahol a kulcs és az érték is string típusú.

localStorage.setItem('name', 'John Doe');

Az adatok lekérdezéséhez használhatjuk a getItem metódust.

const name = localStorage.getItem('name');
console.log(name); // John Doe

Az adatok törléséhez használhatjuk a removeItem metódust.

localStorage.removeItem('name');

Az összes adat törléséhez használhatjuk a clear metódust.

localStorage.clear();

Tömb tárolása

A localStorage csak string típusú adatokat képes tárolni, ezért ha tömböt szeretnénk tárolni, akkor azt először át kell alakítani string típusú adattá.

const fruits = ['apple', 'banana', 'cherry'];

localStorage.setItem('fruits', JSON.stringify(fruits));

Az adatok lekérdezésekor a JSON.parse metódust használhatjuk.

const fruits = JSON.parse(localStorage.getItem('fruits'));
console.log(fruits); // ['apple', 'banana', 'cherry']

HTML összekötése

Az adatokat a localStorage-ban tárolhatjuk, de azokat az adatokat megjeleníteni is kell valahol. Erre a HTML és a JavaScript összekötésére használhatjuk a localStorage-t.

Példa

<input type="text" id="name">
<button id="save">Save</button>
<button id="load">Load</button>
<script>
const nameInput = document.getElementById('name');
const saveButton = document.getElementById('save');
const loadButton = document.getElementById('load');

saveButton.addEventListener('click', () => {
    localStorage.setItem('name', nameInput.value);
});

loadButton.addEventListener('click', () => {
    nameInput.value = localStorage.getItem('name');
});
</script>

sessionStorage

A sessionStorage objektum az adatokat a böngésző ablak élettartama alatt tárolja. Az adatokat a localStorage-hoz hasonlóan kulcs-érték párokban tárolja.

Minden a korábbiakban használt metódus a sessionStorage-ra is alkalmazható.

  • setItem
  • getItem
  • removeItem
  • clear
  • JSON.stringify
  • JSON.parse

Példa

sessionStorage.setItem('name', 'John Doe');
const name = sessionStorage.getItem('name');
console.log(name); // John Doe