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ściwindow.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 sessionStorage
jest 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.";