Harjutus 4: localStorage

Praktiline ülesanne

Avage veebibrauser, näiteks Firefox või Chrome.Avage veebibrauser, näiteks Firefox või Chrome. Lihtsustamiseks ja vigade vältimiseks võite avada veebisaidi example.com või kirjuta consol’i chrome://newtab

Firefox:

Google Chrome:

Järgmisena tuleb vajutada klahvi F12 või hiire paremat nuppu ja valida Inspekteeri. Seejärel minna Console’i.

Sisestage Console’isse localStorage. Näete, et see on tühi.

Google Chrome:

Firefox:

Andmete lisamiseks tuleb kirjutada Console’i:

localStorage.setItem('Lind', 'Pääsuke');
console.log(localStorage.getItem('Lind')); 

Google Chorome:

Firefox:

Salvestan localStorage’isse paar võti-väärtust võtme “Lind” ja väärtusega ‚Pääsuke‘. Saan väärtuse võtme “Lind” järgi.

Erinevalt sessionStorage’ist salvestatakse andmed localStorage’is brauseri sessioonide vahel – isegi kui brauser sulgeda ja uuesti avada, jäävad andmed alles, kuni need käsitsi või skripti abil kustutad.

Et veenduda, et andmed on salvestatud localStorage’isse, tuleb minna jaotisesse Storage -> Local Storage. Seal on näha, et localStorage’i abil lisatud andmed on salvestatud sellesse kohta.

Firefox:

Google Chrome:

Kokkuvõtte

LocalStorage hoiab andmed pikkemaks ajaks kuni kasutaja ise kustuta neid. SessionStorage on seotud konkretse brauseri sessioniga.