HTML lokalnej pamięci, lepszy niż cookies .
Co to jest HTML Local Storage?
Z lokalnej pamięci masowej, aplikacje internetowe mogą przechowywać dane lokalnie w przeglądarce użytkownika.
Przed HTML5, dane aplikacji musiały być przechowywane w cookies , zawarte w każde żądanie serwera. Przechowywanie lokalne jest bardziej bezpieczny, a duże ilości danych mogą być przechowywane lokalnie, bez wpływu na wydajność strony internetowej.
W przeciwieństwie do cookies , limit pamięci jest znacznie większa (at least 5MB) i informacje nigdy nie są przesyłane do serwera.
Przechowywanie lokalne jest za pochodzenie (per domain and protocol) . Wszystkie strony, z jednego pochodzenia, mogą przechowywać i dostęp do tych samych danych.
Przechowywanie lokalne i sesja
przechowywanie stron internetowych oferuje dwa różne obszary lokalnego magazynowania i przechowywania sesji przechowywaniu, które różnią się pod względem zakresu i życia.
Dane umieszczone w pamięci lokalnej jest za pochodzenie (kombinacja protokołu, nazwy hosta i numeru portu zdefiniowanego w polityce tego samego pochodzenia) (dane są dostępne dla wszystkich skryptów ładowanych od stron z tego samego pochodzenia, które wcześniej zapisanych danych) oraz ustępuje po zamknięciu przeglądarki.
przechowywania sesji jest za pochodzenia-per-oknie-lub-tab i ogranicza się do życia okna. przechowywania sesji ma umożliwić oddzielne instancje tej samej aplikacji internetowej, aby uruchomić w różnych oknach bez przeszkadzania sobie nawzajem, że w przypadku użycia nie jest dobrze obsługiwany przez cookies.
Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje pamięci lokalnej.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11,5 |
HTML Local Storage Przedmioty
HTML lokalnej pamięci udostępnia dwa obiekty do przechowywania danych na kliencie:
- window.localStorage - przechowuje dane bez daty ważności
- window.sessionStorage przechowuje dane dla jednej sesji (dane zostaną utracone, gdy klapka jest zamknięta przeglądarka) -
Przed użyciem pamięci lokalnej, sprawdź Przeglądarki obsługiwane przez localStorage i sessionStorage :
if(typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
LocalStorage Przedmiot
Przedmiotem localStorage przechowuje dane bez daty ważności. Dane nie będą usuwane po zamknięciu przeglądarki i będzie dostępna następnego dnia, tygodnia lub roku.
Przykład
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); Spróbuj sam " Przykład wyjaśnia:
- Tworzenie localStorage nazwa / wartość pary z name="lastname" i value="Smith"
- Pobrać wartość "lastname" i wprowadzić go do elementu o id = „Wynik”
Powyższy przykład można także zapisać w ten sposób:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
Składnia do usuwania "lastname" element localStorage przedstawia się następująco:
localStorage.removeItem("lastname");
Uwaga: pary nazwa / wartość są zawsze przechowywane jako ciągi. Pamiętaj, aby przekonwertować je na inny format w razie potrzeby!
Poniższy przykład zlicza ile razy użytkownik kliknął przycisk. W tym kodzie ciąg wartość jest konwertowana 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)."; Spróbuj sam " sessionStorage Przedmiot
sessionStorage obiekt jest równy localStorage obiektu, oprócz tego, że przechowuje dane tylko jednej sesji. Dane są usuwane, gdy użytkownik zamyka konkretną kartę 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."; Spróbuj sam "