Localstorage

För det här exemplet så utgår vi från en html struktur med ett par knappar. Knapparna går att klicka på för att öka en räknare, men värdet sparas inte mellan sidladdningar. För att spara värdet mellan sidladdningar kan vi använda localStorage.

LocalStorage är ett inbygg api i webbläsaren som gör det möjligt att spara data. Datan är sparad lokalt i webbläsaren.

Exempel

Html kod för knapparna och display elementet.

<h2>Click count: 0</h2>
<div class="button-container">
    <button class="btn" id="count-button">Click</button>
    <button class="btn" id="save-button">Save clicks</button>
    <button class="btn" id="reset-button">Reset clicks</button>
</div>

Javascript för exemplet. Exemplet kan öka räknaren och nollställa den, men knappen för att spara värdet gör inget.

window.addEventListener('load', (event) => {
    const countButton = document.querySelector('#count-button');
    const saveButton = document.querySelector('#save-button');
    const resetButton = document.querySelector('#reset-button');

    let count = 0;

    const showCount = (countValue) => {
        const counterElement = document.querySelector('.playground > h2');
        counterElement.textContent = `Click count: ${countValue}`;
    };

    showCount(count);

    countButton.addEventListener('click', (event) => {
        event.preventDefault();
        count++;
        showCount(count);
    });
    saveButton.addEventListener('click', (event) => {
        event.preventDefault();
    });
    resetButton.addEventListener('click', (event) => {
        event.preventDefault();
        count = 0;
        showCount(count);
    });
});

Localstorage

Spara, setItem

För att spara till localStorage så används setItem().

localStorage.setItem(PARAMETER, VÄRDE);

Uppdatera spara knappen med följande kod för att den ska spara till localStorage.

saveButton.addEventListener('click', (event) => {
    event.preventDefault();
    localStorage.setItem('count', count);
});

Nu är värdet sparat i localStorage, undersök att det fungerar genom att inspektera localStorage i webbläsaren. Kontrollera att värdet är sparat även när du laddar om sidan.

Hämta, getItem

Ladda något från localStorage med getItem(). Kom ihåg att spara det du laddar i en variabel.

localStorage.getItem(PARAMETER);

Uppdatera koden för att ladda count från localStorage.

let count = localStorage.getItem('count') || 0;

Rensa, removeItem

Det sista är att rensa localStorage. Det går att rensa hela storage, men att föredra är att ta bort enskilda värden. För att göra detta så används removeItem().

localStorage.removeItem(PARAMETER);

Nu kan du uppdatera reset knappen.

resetButton.addEventListener('click', (event) => {
    event.preventDefault();
    localStorage.removeItem('count');
    count = 0;
    showCount(count);
});

Slutgiltig kod

Den kompletta Javascript koden.

window.addEventListener('load', (event) => {
    const countButton = document.querySelector('#count-button');
    const saveButton = document.querySelector('#save-button');
    const resetButton = document.querySelector('#reset-button');

    let count = localStorage.getItem('count') || 0;

    const showCount = (countValue) => {
        const counterElement = document.querySelector('.playground > h2');
        counterElement.textContent = `Click count: ${countValue}`;
    };

    showCount(count);

    countButton.addEventListener('click', (event) => {
        event.preventDefault();
        count++;
        showCount(count);
    });
    saveButton.addEventListener('click', (event) => {
        event.preventDefault();
        localStorage.setItem('count', count);
    });
    resetButton.addEventListener('click', (event) => {
        event.preventDefault();
        localStorage.removeItem('count');
        count = 0;
        showCount(count);
    });
});

Mer komplexa objekt

Om det som ska sparas i localStorage är av mer komplex karaktär, en array eller ett objekt till exempel, så kan det sparas som en json sträng.

Öppna utvecklarverktygen och undersök värdet för exempel. Objektet är sparat som en JSON sträng. Prova att konvertera det till ett JSON objekt i konsollen.

let exempel = localStorage.getItem('exempel');
console.log(exempel); // som sträng
exempel = JSON.parse(exempel);
console.log(exempel); // som objekt

När objektet är parsat med JSON.parse() så kan vi nu arbeta med det och ändra det.

exempel.type = 'björn';
exempel.friends.push('Vargen');
exempel.age = exempel.age + 1; // öka ålder med 1
console.log(exempel);

För att sedan spara objektet så använder du setItem. Men innan det sparas så måste objektet konverteras till en json sträng med JSON.stringify().

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

Öppna nu utvecklarverktygen och studera objektet i applikation -> localStorage -> exempel.