Lokalne przechowywanie HTML

Lokalne przechowywanie HTML: lepsze niż pliki 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 plikach cookie, w tym w każdym żądaniu 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 plików 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

Tablica w tabeli 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ą utracone, gdy zamknięty jest zakład przeglądarki)

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

if (typeof(Storage) !== "undefined") {
    // Kod dotyczący localStorage/sessionStorage
} else {
    // Przepraszamy! Nie obsługuje się Web Storage ..
}

Obiekt localStorage

Obiekt localStorage przechowuje dane bez daty wygaśnięcia. Dane nie są usuwane, gdy przeglądarka jest zamknięta, i 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ść localStorage, gdzie: name="lastname", value="Gates"
  • Pobieranie wartości "lastname" i wstawienie jej do elementu o id="result"

Przykład może również wyglądać tak:

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

Gramatyka usuwania elementu "lastname" z localStorage:

localStorage.removeItem("lastname");

Komentarz: Para nazwa/wartość zawsze jest przechowywana 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, ciąg znaków wartości jest konwertowany na liczbę, a następnie kolejno zwiększa licznik:

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óżnica polega na tym, że dane są przechowywane tylko na jednej sesji. Jeśli użytkownik zamknie konkretną kartę przeglądarki, dane zostaną 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