Samouczek HTML

Strona główna HTML Wprowadzenie do HTML Edytory HTML Podstawy HTML Elementy HTML Atrybuty HTML Nagłówki HTML Akapity HTML Style HTML Formatowanie HTML Cytaty HTML Komentarze HTML Kolory HTML HTML CSS Linki HTML Obrazy HTML Ulubione HTML Tabele HTML Listy HTML Blok HTML i wbudowany Klasy HTML Identyfikator HTML Ramki HTML HTML JavaScript Ścieżki plików HTML Nagłówek HTML Układ HTML HTML Responsywne Kod komputerowy HTML Semantyka HTML Przewodnik po stylach HTML Jednostki HTML Symbole HTML Emotikony HTML Zestaw znaków HTML Kodowanie adresu URL HTML HTML a XHTML

Formularze HTML

Formularze HTML Atrybuty formularza HTML Elementy formularza HTML Typy danych wejściowych HTML Atrybuty wejściowe HTML Atrybuty formularza wejściowego HTML

Grafika HTML

Płótno HTML HTML SVG

Media HTML

Media HTML Wideo HTML Dźwięk HTML Wtyczki HTML HTML YouTube

API HTML

Geolokalizacja HTML Przeciągnij/upuść HTML Magazyn sieciowy HTML HTML Web Workers HTML SSE

Przykłady HTML

Przykłady HTML Quiz HTML Ćwiczenia HTML Certyfikat HTML Podsumowanie HTML Dostępność HTML

Odniesienia HTML

Lista znaczników HTML Atrybuty HTML Globalne atrybuty HTML Obsługa przeglądarki HTML Zdarzenia HTML Kolory HTML Płótno HTML HTML audio/wideo Dokumenty HTML Zestawy znaków HTML Kodowanie adresu URL HTML Kody językowe HTML Wiadomości HTTP Metody HTTP Konwerter PX na EM Skróty klawiszowe

Interfejs API przechowywania danych w sieci Web


przechowywanie w sieci HTML; lepsze niż ciasteczka.


Co to jest przechowywanie HTML w sieci Web?

Dzięki magazynowi internetowemu aplikacje internetowe mogą przechowywać dane lokalnie w przeglądarce użytkownika.

Przed HTML5 dane aplikacji musiały być przechowywane w plikach cookie, dołączanych do każdego żądania serwera. Przechowywanie w Internecie jest bezpieczniejsze, a duże ilości danych można przechowywać lokalnie, bez wpływu na wydajność witryny.

W przeciwieństwie do plików cookie, limit przechowywania jest znacznie większy (co najmniej 5 MB), a informacje nigdy nie są przesyłane na serwer.

Przechowywanie w sieci Web zależy od pochodzenia (na domenę i protokół). Wszystkie strony z jednego źródła mogą przechowywać te same dane i uzyskiwać do nich dostęp.


Obsługa przeglądarki

Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje usługę Web Storage.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML Web Storage Objects

Magazyn sieciowy HTML udostępnia dwa obiekty do przechowywania danych na kliencie:

  • window.localStorage- przechowuje dane bez daty ważności
  • window.sessionStorage- przechowuje dane na jedną sesję (dane są tracone po zamknięciu zakładki przeglądarki)

Przed użyciem magazynu internetowego sprawdź obsługę przeglądarki localStorage i sessionStorage:

if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}


Lokalny obiekt magazynowy

Obiekt localStorage przechowuje dane bez daty wygaśnięcia. Dane nie zostaną usunięte po zamknięciu przeglądarki i będą dostępne następnego dnia, tygodnia lub roku.

Przykład

// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Przykład wyjaśniony:

  • Utwórz parę nazwa/wartość localStorage z name="nazwisko" i value="Smith"
  • Pobierz wartość „nazwisko” i wstaw ją do elementu z id="result"

Powyższy przykład można również zapisać w ten sposób:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

Składnia usuwania elementu localStorage „nazwisko” jest następująca:

localStorage.removeItem("lastname");

Uwaga: Pary nazwa/wartość są zawsze przechowywane jako ciągi. Pamiętaj, aby w razie potrzeby przekonwertować je na inny format!

Poniższy przykład zlicza, ile razy użytkownik kliknął przycisk. W tym kodzie ciąg wartości jest konwertowany na liczbę, aby móc zwiększyć licznik:

Przykład

if (localStorage.clickcount) {
  localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
  localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";

Obiekt sessionStorage

Obiekt sessionStoragejest równy obiektowi localStorage, z tą różnicą , że przechowuje dane tylko dla jednej sesji. Dane są usuwane po zamknięciu przez użytkownika określonej zakładki przeglądarki.

Poniższy przykład zlicza, ile razy użytkownik kliknął przycisk w bieżącej sesji:

Przykład

if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
  sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";