Jakie są zalety i wady techniczne localStorage, sessionStorage, session i cookies i kiedy miałbym używać jednego nad drugim?

Jest to pytanie o bardzo szerokim zakresie, a wiele zalet / wad będzie zależało od sytuacji.

We wszystkich przypadkach te mechanizmy przechowywania będą specyficzne dla konkretnej przeglądarki na indywidualnym komputerze / urządzeniu. Wszelkie wymagania dotyczące przechowywania danych na bieżąco między sesjami będą musiały obejmować stronę serwera aplikacji - najprawdopodobniej przy użyciu bazy danych, ale prawdopodobnie XML lub pliku tekstowego / CSV.

localStorage, sessionStorage i pliki cookie to rozwiązania pamięci masowej dla klientów. Dane sesji są przechowywane na serwerze, gdzie pozostają pod twoją bezpośrednią kontrolą.

localStorage i sessionStorage

localStorage i sessionStorage to stosunkowo nowe interfejsy API (co oznacza, że ​​nie wszystkie starsze przeglądarki będą je obsługiwać) i są prawie identyczne (zarówno w interfejsach API, jak i możliwościach), z wyjątkiem trwałości. sessionStorage (jak sama nazwa wskazuje) jest dostępne tylko na czas trwania sesji przeglądarki (i jest usuwane po zamknięciu karty lub okna) - jednak zachowuje przeładowanie strony (źródłowy przewodnik po pamięci DOM - Mozilla Developer Network ).

Oczywiście, jeśli przechowywane dane muszą być dostępne na bieżąco, localStorage jest lepszy niż sessionStorage - chociaż należy pamiętać, że oba mogą być usunięte przez użytkownika, więc nie powinieneś polegać na ciągłym istnieniu danych w obu przypadkach.

localStorage i sessionStorage są idealne do utrwalania niewrażliwych danych potrzebnych w skryptach klienta między stronami (na przykład: preferencje, wyniki w grach). Dane przechowywane w localStorage i sessionStorage można łatwo odczytać lub zmienić z poziomu klienta / przeglądarki, więc nie należy polegać na przechowywaniu wrażliwych lub związanych z bezpieczeństwem danych w aplikacjach.

Ciasteczka

Dotyczy to również plików cookie, które mogą być w trywialny sposób modyfikowane przez użytkownika, a dane mogą być odczytywane z nich zwykłym tekstem - więc jeśli chcesz przechowywać poufne dane, sesja jest naprawdę jedyną opcją. Jeśli nie korzystasz z protokołu SSL, informacje o plikach cookie mogą również zostać przechwycone podczas transportu, szczególnie w otwartym wifi.

Z drugiej strony pliki cookie mogą mieć stopień ochrony przed zagrożeniami bezpieczeństwa, takimi jak Cross-Site Scripting (XSS) / Injection Script, ustawiając flagę tylko HTTP, co oznacza, że ​​nowoczesne (obsługujące) przeglądarki uniemożliwiają dostęp do plików cookie i wartości z JavaScript ( Zapobiegnie to również dostępowi do Twojego własnego, poprawnego kodu JavaScript). Jest to szczególnie ważne w przypadku plików cookie uwierzytelniających, które służą do przechowywania tokena zawierającego dane zalogowanego użytkownika - jeśli masz kopię tego pliku cookie, to dla wszystkich celów i celów stajesz się tym użytkownikiem, o ile aplikacja internetowa jest i mieć taki sam dostęp do danych i funkcji, jakie posiada użytkownik.

Ponieważ pliki cookie są używane do celów uwierzytelniania i utrwalania danych użytkownika, wszystkie pliki cookie ważne dla strony są wysyłane z przeglądarki do serwera dla każdego żądania w tej samej domenie - obejmuje to pierwotne żądanie strony, wszelkie kolejne żądania Ajax, wszystkie obrazy, arkusze stylów, skrypty i czcionki. Z tego powodu pliki cookie nie powinny być używane do przechowywania dużych ilości informacji. Przeglądarka może również nakładać ograniczenia na rozmiar informacji, które mogą być przechowywane w plikach cookie. Zazwyczaj pliki cookie służą do przechowywania tokenów identyfikacyjnych do uwierzytelniania, sesji i śledzenia reklam. Tokeny zwykle same w sobie nie są czytelnymi dla człowieka informacjami, ale są zaszyfrowanymi identyfikatorami powiązanymi z aplikacją lub bazą danych.

localStorage vs. sessionStorage vs. Cookies

Pod względem możliwości pliki cookie, sessionStorage i localStorage pozwalają tylko na przechowywanie ciągów znaków - możliwe jest niejawne przekształcanie pierwotnych wartości podczas ustawiania (będą musiały zostać przekonwertowane z powrotem, aby użyć ich jako typu po przeczytaniu), ale nie Obiekty lub Tablice (istnieje możliwość szeregowania ich w JSON w celu przechowywania ich przy użyciu interfejsów API). Przechowywanie sesji ogólnie umożliwia przechowywanie dowolnych operacji podstawowych lub obiektów obsługiwanych przez język / strukturę po stronie serwera.

Po stronie klienta vs. po stronie serwera

Ponieważ HTTP jest protokołem bezstanowym - aplikacje internetowe nie mają możliwości zidentyfikowania użytkownika na podstawie poprzednich wizyt po powrocie na stronę internetową - dane sesji zwykle opierają się na tokenach cookie w celu identyfikacji użytkownika podczas kolejnych odwiedzin (chociaż rzadko można użyć parametrów adresu URL ten sam cel). Dane zazwyczaj mają przesuwający się czas wygaśnięcia (odnawiany za każdym razem, gdy użytkownik odwiedza), a w zależności od serwera / struktury danych dane będą albo przechowywane w toku (dane zostaną utracone, jeśli serwer internetowy ulegnie awarii lub zostanie zrestartowany), albo zewnętrznie w serwer stanu lub baza danych. Jest to również konieczne w przypadku korzystania z farmy internetowej (więcej niż jeden serwer dla danej witryny).

Ponieważ dane sesji są całkowicie kontrolowane przez twoją aplikację (po stronie serwera), jest to najlepsze miejsce dla wszystkiego, co wrażliwe lub bezpieczne z natury.

Oczywistą wadą danych po stronie serwera jest skalowalność - zasoby serwera są wymagane dla każdego użytkownika na czas trwania sesji, a wszelkie dane potrzebne po stronie klienta muszą być wysyłane przy każdym żądaniu. Ponieważ serwer nie ma możliwości sprawdzenia, czy użytkownik przechodzi do innej witryny lub zamyka przeglądarkę, dane sesji muszą wygasnąć po upływie określonego czasu, aby uniknąć zajęcia wszystkich zasobów serwera przez porzucone sesje. Korzystając z danych sesji, należy pamiętać o możliwości wygaśnięcia i utraty danych, zwłaszcza na stronach z długimi formularzami. Zostanie również utracony, jeśli użytkownik usunie pliki cookie lub przełączy przeglądarki / urządzenia.

Niektóre frameworki / programiści używają ukrytych danych HTML do utrwalania danych z jednej strony formularza na drugą, aby uniknąć wygaśnięcia sesji.

localStorage, sessionStorage i pliki cookie podlegają zasadom „tego samego pochodzenia”, co oznacza, że ​​przeglądarki powinny uniemożliwiać dostęp do danych, z wyjątkiem domeny, od której informacje te mają się zaczynać.

Aby dowiedzieć się więcej na temat technologii pamięci masowej dla klientów, zobacz Dive Into Html 5 .

1. Lokalny magazyn

   Plusy :

   1. Przechowywanie w Internecie można uprościć jako ulepszenie plików cookie, zapewniając znacznie większą pojemność. Jeśli spojrzysz na kod źródłowy Mozilli, zauważymy, że 5120 KB ( 5 MB, co odpowiada 2,5 milionom znaków w Chrome) to domyślny rozmiar pamięci dla całej domeny. Daje to znacznie więcej miejsca do pracy niż typowe ciasteczko 4KB.
   2. Dane nie są wysyłane z powrotem do serwera dla każdego żądania HTTP (HTML, obrazy, JavaScript, CSS itp.) - co zmniejsza ilość ruchu między klientem a serwerem.
   3. Dane przechowywane w localStorage są przechowywane do momentu ich jawnego usunięcia. Wprowadzone zmiany są zapisywane i dostępne dla wszystkich bieżących i przyszłych wizyt w witrynie.

   Wady :

   1. Działa na zasadach tego samego pochodzenia . Przechowywane dane będą więc dostępne tylko dla tego samego źródła.

2. Ciasteczka

   Plusy:

   1. W porównaniu do innych, nie ma nic AFAIK.

   Cons:

   1. Limit 4K dotyczy całego pliku cookie, w tym nazwy, wartości, daty ważności itp. Aby obsługiwać większość przeglądarek, utrzymuj nazwę poniżej 4000 bajtów, a ogólny rozmiar pliku cookie poniżej 4093 bajtów.

   2. Dane są wysyłane z powrotem do serwera dla każdego żądania HTTP (HTML, obrazy, JavaScript, CSS itp.) - zwiększając ruch między klientem a serwerem.

      Zazwyczaj dozwolone są:

      • Łącznie 300 plików cookie
      • 4096 bajtów na plik cookie
      • 20 plików cookie na domenę
      • 81920 bajtów na domenę (Biorąc pod uwagę 20 plików cookie o maksymalnym rozmiarze 4096 = 81920 bajtów.)

3. sessionStorage

   Plusy:

   1. Jest podobny do localStorage.
   2. Dane nie są trwałe, tzn. Dane są dostępne tylko na okno (lub kartę w przeglądarkach takich jak Chrome i Firefox). Dane są dostępne tylko podczas sesji strony. Dokonane zmiany są zapisywane i dostępne dla bieżącej strony, a także przyszłych wizyt w witrynie w tym samym oknie. Po zamknięciu okna pamięć jest usuwana.

   Cons:

   1. Dane są dostępne tylko w oknie / zakładce, w której zostały ustawione.
   2. Podobnie localStoragedziała z zasadami tego samego pochodzenia . Przechowywane dane będą więc dostępne tylko dla tego samego źródła.

Kasy między kartami - jak ułatwić komunikację między kartami przeglądarki różnych źródeł.

OK, LocalStorage, ponieważ nazywa się to lokalnym magazynem dla twoich przeglądarek, może zaoszczędzić do 10 MB , SessionStorage robi to samo, ale jak sama nazwa mówi, jest oparty na sesji i zostanie usunięty po zamknięciu przeglądarki, może również zapisać mniej niż LocalStorage, do 5 MB , ale pliki cookie to bardzo małe dane przechowywane w przeglądarce, które mogą zaoszczędzić do 4KB i można uzyskać do nich dostęp za pośrednictwem serwera lub przeglądarki zarówno ...

Stworzyłem również poniższy obrazek, aby pokazać różnice na pierwszy rzut oka:

Są to właściwości obiektu „window” w JavaScript, podobnie jak dokument jest jedną z właściwości obiektu window, który przechowuje obiekty DOM.

Właściwość Pamięć sesji utrzymuje osobny obszar pamięci dla każdego źródła, który jest dostępny przez czas trwania sesji strony, tj. Dopóki przeglądarka jest otwarta, w tym strony ładuje się i przywraca.

Lokalna pamięć masowa robi to samo, ale utrzymuje się nawet po zamknięciu i ponownym otwarciu przeglądarki.

Możesz ustawić i pobrać zapisane dane w następujący sposób:

sessionStorage.setItem('key', 'value');

var data = sessionStorage.getItem('key');

Podobnie w przypadku localStorage.

Lokalne przechowywanie: Przechowuje dane informacji o użytkowniku bez daty wygaśnięcia. Dane te nie zostaną usunięte, gdy użytkownik zamknie okna przeglądarki, będą dostępne przez dzień, tydzień, miesiąc i rok.

W pamięci lokalnej można przechowywać dane w trybie offline 5-10mb.

//Set the value in a local storage object
localStorage.setItem('name', myName);

//Get the value from storage object
localStorage.getItem('name');

//Delete the value from local storage object
localStorage.removeItem(name);//Delete specifice obeject from local storege
localStorage.clear();//Delete all from local storege

Przechowywanie sesji: To samo, co lokalna data przechowywania, z tym wyjątkiem, że usunie wszystkie okna, gdy okno przeglądarki zostanie zamknięte przez użytkownika sieci.

W sesji można przechowywać do 5 MB danych

//set the value to a object in session storege
sessionStorage.myNameInSession = "Krishna";

Sesja : Sesja jest zmienną globalną przechowywaną na serwerze. Każda sesja ma przypisany unikalny identyfikator, który służy do pobierania przechowywanych wartości.

Pliki cookie : Pliki cookie to dane przechowywane na komputerze w małych plikach tekstowych jako pary nazwa-wartość. Po ustawieniu pliku cookie wszystkie kolejne żądania strony zwracają nazwę i wartość pliku cookie.

Interfejs API Web Storage zapewnia mechanizmy, za pomocą których przeglądarki mogą bezpiecznie przechowywać pary klucz / wartość w znacznie bardziej intuicyjny sposób niż przy użyciu plików cookie. API Web Storage rozszerza Windowobiekt z dwoma nowymi właściwościami - Window.sessionStoragei Window.localStorage. - wywołanie jednego z nich spowoduje utworzenie instancji obiektu Storage, dzięki któremu elementy danych mogą być ustawiane, pobierane i usuwane. Innym przedmiotem bagażu jest używany dla sessionStoragei localStoragedla każdego miejsca pochodzenia (domeny).

Obiekty pamięci są prostymi magazynami klucz-wartość , podobnymi do obiektów, ale pozostają nienaruszone podczas ładowania strony .

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

Klucze i wartości są zawsze ciągami . Aby zapisać dowolny typ,convert it to Stringa następnie go zapisać. Zawsze zaleca się stosowanieStorage interfacemetod.

var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('Converting String to Object: ', JSON.parse(retrievedObject));

Dwa mechanizmy przechowywania w sieci Web są następujące:

• sessionStorage utrzymuje osobny obszar przechowywania dla każdego podanego źródła ^Polityka tego ^{samego pochodzenia,} która jest dostępna przez czas trwania sesji strony (tak długo, jak przeglądarka jest otwarta, w tym przeładowuje i przywraca stronę).
• localStorage robi to samo, ale utrzymuje się nawet po zamknięciu i ponownym otwarciu przeglądarki.

Pamięć « Pamięć lokalna zapisuje dane na dysku, natomiast pamięć sesji zapisuje dane tylko w pamięci. Wszelkie dane zapisane w pamięci sesji są usuwane po zamknięciu aplikacji.

Dostępna pamięć maksymalna różni się od przeglądarki , ale większość przeglądarek wdrożyły przynajmniej W3C zaleca maksymalny limit przechowywania 5MB .

+----------------+--------+---------+-----------+--------+
|                | Chrome | Firefox | Safari    |  IE    |
+----------------+--------+---------+-----------+--------+
| LocalStorage   | 10MB   | 10MB    | 5MB       | 10MB   |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB   | 10MB    | Unlimited | 10MB   |
+----------------+--------+---------+-----------+--------+

Zawsze przechwytuj zabezpieczenia LocalStorage, a przekroczone limity błędów

• QuotaExceededError : Gdy limity pamięci przekroczą tę funkcjęwindow.sessionStorage.setItem(key, value);, zgłasza wyjątek DOMException „QuotaExceededError”, jeśli nie można ustawić nowej wartości. (Ustawienie może się nie powieść, jeśli np. Użytkownik wyłączył pamięć dla witryny lub jeśli limit został przekroczony.)

  DOMException. QUOTA_EXCEEDED_ERR to 22 , przykładowe skrzypce .

• SecurityError :Uncaught SecurityError: Access to 'localStorage' is denied for this document.

  CHROME:-Privacy and security « Content settings « Cookies « Block third-party cookies.

StorageEvent «Zdarzenie pamięci jest uruchamiane na obiekcie okna dokumentu, gdy zmienia się obszar pamięci. Gdy agent użytkownika ma wysłać powiadomienie o pamięci dla dokumentu, agent użytkownika musi ustawić w kolejce zadanie, aby wywołać zdarzenie o nazwie pamięć masowa w obiekcie okna obiektu dokumentu za pomocą StorageEvent.

Uwaga: Aby zobaczyć przykład ze świata rzeczywistego, zobacz Demonstracja pamięci internetowej . ^{sprawdź kod źródłowy}

Nasłuchuj zdarzenia pamięci w dom / Window, aby złapać zmiany w pamięci. skrzypce .

Pliki cookie (plik cookie przeglądarki internetowej, plik cookie przeglądarki) Pliki cookie to dane przechowywane na komputerze w małych plikach tekstowych jako pary nazwa-wartość.

Dostęp JavaScript za pomocą Document.cookie

Nowe pliki cookie można również tworzyć za pomocą JavaScript za pomocą właściwości Document.cookie, a jeśli flaga HttpOnly nie jest ustawiona, dostęp do istniejących plików cookie można również uzyskać za pomocą JavaScript.

document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); 
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

Bezpieczne i ^HTTP pliki cookie ^{Mechanizm zarządzania stanem HTTP}

Pliki cookie są często używane w aplikacji internetowej do identyfikowania użytkownika i jego uwierzytelnionej sesji

Po otrzymaniu żądania HTTP serwer może wysłać nagłówek Set-Cookie z odpowiedzią. Pliki cookie są zwykle przechowywane przez przeglądarkę, a następnie są wysyłane wraz z żądaniami wysyłanymi do tego samego serwera w nagłówku HTTP Cookie.

Set-Cookie: <cookie-name>=<cookie-value> 
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>

Pliki cookie sesji zostaną usunięte, gdy klient zostanie zamknięty. Nie określają dyrektyw dotyczących okresu ważności ani maksymalnego wieku.

Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/

Trwałe pliki cookie wygasają w określonym dniu (wygasa) lub po określonym czasie (maksymalny wiek).

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

Nagłówek żądania HTTP Cookie zawiera zapisane ciasteczka HTTP wcześniej wysłane przez serwer z nagłówkiem Set-Cookie. Pliki cookie tylko HTTP nie są dostępne przez JavaScript za pośrednictwem właściwości Document.cookie, XMLHttpRequest i API API żądania w celu złagodzenia ataków przeciwko skryptom krzyżowym (XSS).

Pliki cookie są wykorzystywane głównie do trzech celów:

• Zarządzanie sesją «Loginy, koszyki, wyniki gier lub cokolwiek innego, o czym serwer powinien pamiętać
• Personalizacja «Preferencje użytkownika, motywy i inne ustawienia
• Śledzenie (rejestrowanie i analiza zachowań użytkowników) «Pliki cookie są powiązane z domeną. Jeśli ta domena jest taka sama jak domena strony, na której jesteś, pliki cookie są uznawane za własne pliki cookie. Jeśli domena jest inna, mówi się, że jest to plik cookie innej firmy. Podczas gdy własne pliki cookie są wysyłane tylko na serwer, który je ustawia, strona internetowa może zawierać obrazy lub inne komponenty przechowywane na serwerach w innych domenach (np. Banery reklamowe). Pliki cookie wysyłane za pośrednictwem tych komponentów stron trzecich nazywane są plikami cookie stron trzecich i służą głównie do reklamy i śledzenia w Internecie.

Pliki cookie zostały wymyślone, aby rozwiązać problem „jak zapamiętać informacje o użytkowniku”:

• Gdy użytkownik odwiedza stronę internetową, jego nazwa może być przechowywana w pliku cookie.
• Następnym razem, gdy użytkownik odwiedza stronę, do żądania dodawane są pliki cookie należące do strony. W ten sposób serwer pobiera dane niezbędne do „zapamiętania” informacji o użytkownikach.

Przykład GitHubGist

Podsumowując

• localStorage utrzymuje się na różnych kartach lub oknach, a nawet jeśli zamkniemy przeglądarkę, zgodnie z polityką bezpieczeństwa domeny i wyborem użytkownika dotyczącym limitu przydziału.
• Obiekt sessionStorage nie jest utrzymywany, jeśli zamkniemy kartę (kontekst przeglądania najwyższego poziomu), ponieważ nie istnieje, jeśli surfujemy za pośrednictwem innej karty lub okna.
• Web Storage (sesyjny, lokalny) pozwala nam zapisać dużą liczbę par klucz / wartość i dużo tekstu, czego nie można zrobić za pomocą plików cookie.
• Pliki cookie używane do wrażliwych działań powinny mieć tylko krótki okres użytkowania.
• Pliki cookie wykorzystywane głównie do reklamy i śledzenia w Internecie. Zobacz na przykład rodzaje plików cookie używanych przez Google .
• Pliki cookie są wysyłane przy każdym żądaniu, więc mogą pogorszyć wydajność (szczególnie w przypadku mobilnych połączeń danych). Nowoczesne interfejsy API do przechowywania klientów to API do przechowywania danych w sieci (localStorage i sessionStorage) i IndexedDB.

LocalStorage :

• Przechowywanie w Internecie można uprościć jako ulepszenie plików cookie, zapewniając znacznie większą pojemność. Dostępny rozmiar to 5 MB, co oznacza znacznie więcej miejsca do pracy niż typowy plik cookie 4KB.

• Dane nie są wysyłane z powrotem do serwera dla każdego żądania HTTP (HTML, obrazy, JavaScript, CSS itp.) - co zmniejsza ilość ruchu między klientem a serwerem.

• Dane przechowywane w localStorage są przechowywane do momentu ich jawnego usunięcia. Wprowadzone zmiany są zapisywane i dostępne dla wszystkich bieżących i przyszłych wizyt w witrynie.

• Działa na zasadach tego samego pochodzenia. Przechowywane dane będą więc dostępne tylko dla tego samego źródła.

Ciasteczka:

• Możemy ustawić czas ważności każdego pliku cookie

• Limit 4K dotyczy całego pliku cookie, w tym nazwy, wartości, daty ważności itp. Aby obsługiwać większość przeglądarek, utrzymuj nazwę poniżej 4000 bajtów, a ogólny rozmiar pliku cookie poniżej 4093 bajtów.

• Dane są wysyłane z powrotem do serwera dla każdego żądania HTTP (HTML, obrazy, JavaScript, CSS itp.) - zwiększając ruch między klientem a serwerem.

sessionStorage:

• Jest podobny do localStorage.

• Zmiany są dostępne tylko dla okna (lub karty w przeglądarkach takich jak Chrome i Firefox). Dokonane zmiany są zapisywane i dostępne dla bieżącej strony, a także przyszłych wizyt w witrynie w tym samym oknie. Po zamknięciu okna pamięć jest usuwana. Dane są dostępne tylko w oknie / karcie, w której zostały ustawione.

• Dane nie są trwałe, tzn. Zostaną utracone po zamknięciu okna / karty. Podobnie jak localStorage, działa na zasadach tego samego pochodzenia. Przechowywane dane będą więc dostępne tylko dla tego samego źródła.

tutaj jest szybki przegląd z prostym i szybkim zrozumieniem

od nauczyciela Beau Carnesa z freecodecamp