4.1 localStorage i sessionStorage
Przechowywanie w sieci pozwala aplikacjom webowym na zapisywanie danych w przeglądarce użytkownika. To przydatne do trzymania informacji, które powinny zostać zachowane między wizytami lub podczas nawigacji po stronach. W HTML5 wprowadzono dwa główne typy przechowywania: localStorage i sessionStorage.
Co to jest localStorage?
localStorage — to przechowywanie danych, które jest zapisywane w przeglądarce użytkownika na nieokreślony czas. Dane w localStorage są dostępne nawet po zamknięciu przeglądarki i ponownym uruchomieniu komputera. To przydatne do trzymania informacji, które powinny być zachowane między sesjami, takich jak ustawienia użytkownika czy dane koszyka zakupów.
Co to jest sessionStorage?
sessionStorage — to przechowywanie danych, które jest zapisywane w przeglądarce użytkownika na czas jednej sesji. Dane w sessionStorage są dostępne tylko do momentu, kiedy karta lub okno przeglądarki pozostaje otwarte. To przydatne do trzymania danych, które są potrzebne tylko na czas jednej sesji, takich jak tymczasowe dane formularza czy stan aplikacji.
Podstawowe metody i właściwości
Metody i właściwości localStorage i sessionStorage
Oba typy przechowywania mają takie samo API, które obejmuje metody i właściwości do pracy z danymi:
setItem(key, value): zapisuje wartość z podanym kluczem.getItem(key): zwraca wartość zapisaną pod podanym kluczem.removeItem(key): usuwa wartość z podanym kluczem.clear(): czyści wszystkie dane w przechowywaniu.key(index): zwraca klucz według indeksu.length: zwraca liczbę par klucz-wartość w przechowywaniu.
4.2 Przykłady użycia
Przykład użycia localStorage:
<!DOCTYPE html>
<html>
<head>
<title>localStorage Example</title>
</head>
<body>
<h1>localStorage Example</h1>
<input type="text" id="username" placeholder="Enter your username">
<button id="saveButton">Save</button>
<button id="loadButton">Load</button>
<script>
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
const usernameInput = document.getElementById('username');
// Zapisanie wartości w localStorage
saveButton.addEventListener('click', function() {
const username = usernameInput.value;
localStorage.setItem('username', username);
alert('Nazwa użytkownika zapisana!');
});
// Załadowanie wartości z localStorage
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('Nazwa użytkownika załadowana!\n' + `${savedUsername}`);
} else {
alert('Brak zapisanej nazwy użytkownika.');
}
});
</script>
</body>
</html>
Przykład użycia sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage Example</title>
</head>
<body>
<h1>sessionStorage Example</h1>
<input type="text" id="sessionData" placeholder="Enter some data">
<button id="saveSessionButton">Save</button>
<button id="loadSessionButton">Load</button>
<script>
const saveSessionButton = document.getElementById('saveSessionButton');
const loadSessionButton = document.getElementById('loadSessionButton');
const sessionDataInput = document.getElementById('sessionData');
// Zapisanie wartości w sessionStorage
saveSessionButton.addEventListener('click', function() {
const data = sessionDataInput.value;
sessionStorage.setItem('data', data);
alert('Dane zapisane w sesji!');
});
// Załadowanie wartości z sessionStorage
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('Dane załadowane z sesji!\n' + `${savedData}`);
} else {
alert('Brak danych w sesji.');
}
});
</script>
</body>
</html>
4.3 Porównanie localStorage i sessionStorage
Różnice między localStorage a sessionStorage
- Czas przechowywania:
- localStorage przechowuje dane na nieokreślony czas, dopóki użytkownik lub skrypt ich nie usunie.
- sessionStorage przechowuje dane tylko na czas bieżącej sesji (zakładki lub okna przeglądarki).
- Zakres widoczności:
- Dane w localStorage są dostępne we wszystkich zakładkach i oknach tego samego domeny.
- Dane w sessionStorage są dostępne tylko w bieżącej zakładce lub oknie.
- Rozmiar przechowywania:
- Zazwyczaj localStorage i sessionStorage mają ograniczenie do 5-10 MB na domenę, zależnie od przeglądarki.
Przykład porównania użycia localStorage i sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>Comparison Example</title>
</head>
<body>
<script>
// Użycie localStorage
localStorage.setItem('persistentData', 'Te dane są dostępne we wszystkich sesjach');
console.log(localStorage.getItem('persistentData')); // "Te dane są dostępne we wszystkich sesjach"
// Użycie sessionStorage
sessionStorage.setItem('temporaryData', 'Te dane są dostępne tylko w bieżącej sesji');
console.log(sessionStorage.getItem('temporaryData')); // "Te dane są dostępne tylko w bieżącej sesji"
</script>
</body>
</html>
4.4 Zastosowania
Kiedy używać localStorage:
- Przechowywanie danych, które powinny być zachowane między sesjami, takich jak ustawienia lub preferencje użytkownika
- Przechowywanie danych, które powinny być dostępne we wszystkich zakładkach i oknach tej samej domeny
- Przechowywanie danych, które rzadko się zmieniają
Kiedy używać sessionStorage:
- Przechowywanie tymczasowych danych, które są potrzebne tylko podczas bieżącej sesji
- Przechowywanie danych, które są specyficzne dla bieżącej zakładki lub okna przeglądarki
- Przechowywanie danych, które powinny zostać usunięte po zamknięciu zakładki lub okna
Bezpieczeństwo i prywatność
Używając przechowywania w sieci, ważne jest, aby wziąć pod uwagę kwestie bezpieczeństwa i prywatności:
- Szyfrowanie: dane w przechowywaniu w sieci nie są domyślnie szyfrowane. Jeśli trzeba przechowywać poufne informacje, zaleca się szyfrowanie danych przed zapisaniem.
- Ataki międzydomenowe: przechowywanie w sieci działa w obrębie jednej domeny, co zapobiega dostępowi do danych z innych domen. Jednak ważne jest, by chronić się przed atakami typu XSS (cross-site scripting), by nie dopuścić do uzyskania dostępu do danych przez osoby niepowołane.
- Limit danych: staraj się przechowywać tylko niezbędne informacje i regularnie czyścić przestarzałe dane, aby uniknąć przepełnienia przechowywania.
GO TO FULL VERSION