12. Datu glabāšana (localStorage)

localStorage un sessionStorage ļauj saglabāt datus lietotāja pārlūkprogrammā. Dati tiek glabāti kā teksta atslēga-vērtība pāri.

localStorage vs sessionStorage

Pamatoperācijas

// Saglabāt
localStorage.setItem('vards', 'Jānis');
localStorage.setItem('tema', 'tumša');

// Nolasīt
const vards = localStorage.getItem('vards'); // 'Jānis'

// Dzēst vienu
localStorage.removeItem('vards');

// Dzēst visu
localStorage.clear();

Objektu un masīvu saglabāšana

localStorage saglabā tikai tekstu, tāpēc objektus un masīvus jāpārveido ar JSON:

// Saglabāt objektu
const lietotajs = { vards: 'Anna', vecums: 25 };
localStorage.setItem('lietotajs', JSON.stringify(lietotajs));

// Nolasīt objektu
const dati = JSON.parse(localStorage.getItem('lietotajs'));
console.log(dati.vards); // 'Anna'

// Saglabāt masīvu
const uzdevumi = ['Iepirkties', 'Mācīties', 'Sportot'];
localStorage.setItem('uzdevumi', JSON.stringify(uzdevumi));

Praktisks piemērs: tumšais režīms

const poga = document.querySelector('#tema-poga');

// Ielādēt saglabāto tēmu
const saglaabataaTema = localStorage.getItem('tema');
if (saglaabataaTema === 'tumša') {
document.body.classList.add('tumsa-tema');
}

// Pārslēgt tēmu
poga.addEventListener('click', () => {
document.body.classList.toggle('tumsa-tema');
const irTumša = document.body.classList.contains('tumsa-tema');
localStorage.setItem('tema', irTumša ? 'tumša' : 'gaiša');
});

Praktisks piemērs: uzdevumu saraksts

// Nolasīt uzdevumus no localStorage
function ielādet() {
return JSON.parse(localStorage.getItem('uzdevumi') || '[]');
}

// Saglabāt
function saglabāt(uzdevumi) {
localStorage.setItem('uzdevumi', JSON.stringify(uzdevumi));
}

// Pievienot uzdevumu
function pievienot(teksts) {
const uzdevumi = ielādet();
uzdevumi.push({ teksts, pabeigts: false });
saglabāt(uzdevumi);
}

// Dzēst uzdevumu
function dzēst(indekss) {
const uzdevumi = ielādet();
uzdevumi.splice(indekss, 1);
saglabāt(uzdevumi);
}

Ierobežojumi

• Ietilpība: parasti ~5 MB uz domēnu
• Tikai teksts (jāizmanto JSON objektiem)
• Sinhroni — lielu datu apjomu gadījumā var palēnināt lapu
• Nav drošs — lietotājs var apskatīt un mainīt datus DevTools
• Neglabāt sensitīvus datus (paroles, tokēnus)!