Jakie są zalety i wady techniczne localStorage, sessionStorage, session i cookies i kiedy miałbym używać jednego nad drugim?
531
Jakie są zalety i wady techniczne localStorage, sessionStorage, session i cookies i kiedy miałbym używać jednego nad drugim?
Odpowiedzi:
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 .
źródło
sessionStorage
usunięty po zamknięciu okna lub karty?Lokalny magazyn
Plusy :
Wady :
Ciasteczka
Plusy:
Cons:
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ą:
sessionStorage
Plusy:
localStorage
.Cons:
localStorage
dział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ł.
źródło
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:
źródło
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:
Podobnie w przypadku localStorage.
źródło
sessionStorage
nawet nowa karta to nowe okno. Zatem wszystko przechowywane dla określonej domeny na jednej karcie nie będzie dostępne dla tej samej domeny na następnej karcie.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.
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
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.
źródło
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
Window
obiekt z dwoma nowymi właściwościami -Window.sessionStorage
iWindow.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 dlasessionStorage
ilocalStorage
dla każdego miejsca pochodzenia (domeny).Obiekty pamięci są prostymi magazynami klucz-wartość , podobnymi do obiektów, ale pozostają nienaruszone podczas ładowania strony .
Klucze i wartości są zawsze ciągami . Aby zapisać dowolny typ,
convert it to String
a następnie go zapisać. Zawsze zaleca się stosowanieStorage interface
metod.Dwa mechanizmy przechowywania w sieci Web są następujące:
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 .
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
.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.
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ść.
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.
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.
Pliki cookie sesji zostaną usunięte, gdy klient zostanie zamknięty. Nie określają dyrektyw dotyczących okresu ważności ani maksymalnego wieku.
Trwałe pliki cookie wygasają w określonym dniu (wygasa) lub po określonym czasie (maksymalny wiek).
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:
Pliki cookie zostały wymyślone, aby rozwiązać problem „jak zapamiętać informacje o użytkowniku”:
Przykład GitHubGist
Podsumowując
źródło
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:
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.
źródło
tutaj jest szybki przegląd z prostym i szybkim zrozumieniem
od nauczyciela Beau Carnesa z freecodecamp
źródło