Lokalne przechowywanie HTML

Lokalne przechowywanie HTML: lepsze od cookie.

Co to jest lokalne przechowywanie HTML?

Poprzez lokalne przechowywanie (Local Storage), aplikacje webowe mogą przechowywać dane lokalnie w przeglądarce użytkownika.

Przed HTML5, dane aplikacji mogły być przechowywane tylko w cookie, w tym dla każdego żądania serwera. Lokalne przechowywanie jest bardziej bezpieczne i pozwala przechowywać duże ilości danych lokalnie, bez wpływu na wydajność strony.

W przeciwieństwie do cookie, ograniczenia przechowywania są znacznie większe (co najmniej 5 MB), a informacje nie są przesyłane do serwera.

Lokalne przechowywanie poprzez miejsce pochodzenia (origin) (przez domenę i protokół). Wszystkie strony, z miejsca pochodzenia, mogą przechowywać i uzyskać dostęp do tych samych danych.

Wsparcie przeglądarki

Tabela w kolumnie wskazuje pierwszą wersję przeglądarki, która w pełni obsługuje lokalne przechowywanie.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

Obiekty lokalnego przechowywania HTML

HTML lokalne przechowywanie oferuje dwa obiekty do przechowywania danych na klientach:

  • window.localStorage - przechowywanie danych bez daty wygaśnięcia
  • window.sessionStorage - przechowywanie danych na jedną sesję (dane są tracane, gdy zamyka się kartę przeglądarki)

Podczas korzystania z lokalnego przechowywania, sprawdź wsparcie przeglądarki dla localStorage i sessionStorage:

if (typeof(Storage) !== "undefined") {
    // Kod dla localStorage/sessionStorage
} else {
    // Przepraszamy! Web Storage nie jest obsługiwany...
}

Obiekt localStorage

Obiekt localStorage przechowuje dane bez daty wygaśnięcia. Dane nie są usuwane, gdy przeglądarka jest zamknięta, a są dostępne w następnym dniu, tygodniu lub roku.

Przykład

// Zapisywanie
localStorage.setItem("lastname", "Gates");
// Pobieranie
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Spróbuj sam

Wyjaśnienie przykładu:

  • Tworzenie pary nazwa/wartość w localStorage, gdzie: name="lastname", value="Gates"
  • Pobieranie wartości "lastname" i wstawienie jej do elementu o atrybucie id="result"

Przykład można również napisać w ten sposób:

// Zapisywanie
localStorage.lastname = "Gates";
// Pobieranie
document.getElementById("result").innerHTML = localStorage.lastname;

Gramatyka usuwania elementu "lastname" z localStorage:

localStorage.removeItem("lastname");

Uwaga: Nazwa/wartość zawsze przechowywana jest jako ciąg znaków. Pamiętaj, aby je przekształcić na inny format, jeśli to konieczne!

Poniższy przykład liczy liczbę kliknięć przycisku użytkownika. W kodzie wartość ciągła jest konwertowana na liczbę, a następnie licznik jest zwiększany w kolejności:

Przykład

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Kliknąłeś przycisk " +
localStorage.clickcount + " razy.";

Spróbuj sam

Obiekt sessionStorage

Obiekt sessionStorage jest równy obiektowi localStorage, różni się tym, że przechowuje dane tylko dla jednej sesji. Jeśli użytkownik zamknie konkretną kartę przeglądarki, dane będą również usunięte.

Poniższy przykład liczy kliknięcia przycisku użytkownika w bieżącej sesji:

Przykład

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "W tej sesji, kliknąłeś przycisk " +
sessionStorage.clickcount + " razy.";

Spróbuj sam