1. LocalStorage

   Plusy :

   1. Pamięć internetowa może być postrzegana w uproszczeniu jako ulepszenie plików cookie, zapewniając znacznie większą pojemność pamięci. Jeśli spojrzysz na kod źródłowy Mozilli, zobaczymy, że 5120KB (5MB co równa się 2,5 miliona znaków w Chrome) jest domyślnym rozmiarem pamięci dla całej domeny. Daje to znacznie więcej miejsca do pracy niż typowy plik cookie 4KB.
   2. Dane są Nie wysyłane z powrotem do serwera dla każdego żądania HTTP (HTML, obrazy, JavaScript, CSS, itp.) - zmniejszenie ilości ruchu między Klientem a serwerem.
   3. Dane przechowywane w localStorage pozostają do momentu wyraźnego usunięcia. Wprowadzone zmiany są zapisywane i dostępne dla wszystkich obecnych i przyszłych wizyt na stronie.

   Wady :

   1. działa w oparciu o politykę tego samego pochodzenia . Tak więc przechowywane dane będą dostępne tylko na tym samym pochodzenie.

2. Cookies

   Plusy:

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

Wady:

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, należy zachować 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, images, JavaScript, CSS, etc) - zwiększenie ilości ruchu pomiędzy Klientem a serwerem.

   Zazwyczaj dozwolone są:

   • 300 Pliki cookie w sumie
   • 4096 bajtów na ciasteczko
   • 20 ciasteczek na domenę
   • 81920 bajtów na domenę(podane 20 Ciasteczek o maksymalnym rozmiarze 4096 = 81920 bajtów.)

Są to Właściwości obiektu 'window' w JavaScript, podobnie jak document jest jedną z właściwości obiektu window, w którym znajdują się obiekty DOM.

Właściwość Session storage utrzymuje oddzielny obszar pamięci dla każdego miejsca pochodzenia, który jest dostępny przez czas trwania sesji strony, tj. tak długo, jak długo przeglądarka jest otwarta, w tym przeładowuje i przywraca stronę.

Local Storage robi to samo, ale utrzymuje się nawet wtedy, gdy przeglądarka jest zamknięta i ponownie otwarta.

Możesz ustawić i pobieranie zapisanych danych w następujący sposób:

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

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

Podobnie dla localStorage.

OK, LocalStorage Jak to się nazywa, jest to magazyn lokalny dla Twoich przeglądarek, może zapisać do 10MB, 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, jak do 5MB , ale Cookiessą bardzo małe dane przechowywane w przeglądarce, które mogą zapisać się do 4KB i mogą być dostępne za pośrednictwem serwera lub przeglądarki zarówno...

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

Web Storage API zapewnia mechanizmy, za pomocą których przeglądarki mogą bezpiecznie przechowywać pary klucz / wartość, w znacznie bardziej intuicyjny sposób niż korzystanie z plików cookie. API Web Storage API rozszerza obiekt Window o dwie nowe właściwości - Window.sessionStorage i Window.localStorage. - wywołanie jednego z nich spowoduje utworzenie instancji obiektu Storage, za pomocą której można ustawiać, pobierać i usuwać pozycje danych. Dla sessionStorage i localStorage dla każdego źródła używany jest inny obiekt pamięci (domena).

Obiekty przechowywania są proste przechowuje wartość klucza, podobnie jak obiekty, ale pozostają nienaruszone przez ładowanie strony.

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

klucze i wartości są zawsze ciągami znaków. Do przechowywania dowolnego typu convert it to String a potem ją przechowuj. Zawsze zaleca się stosowanie Storage interface metody.

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 w Web Storage są jak następuje:

• sessionStorage utrzymuje oddzielny obszar przechowywania dla każdego danego pochodzenia^{Polityka tego samego pochodzenia} jest ona dostępna przez cały czas trwania sesji strony (dopóki przeglądarka jest otwarta, włącznie z przeładowaniem i przywróceniem strony).
• localStorage robi to samo, ale utrzymuje się nawet po zamknięciu i ponownym otwarciu przeglądarki.

Przechowywanie " Local storage zapisuje dane na dysk, podczas gdy session storage zapisuje dane tylko do pamięci. Wszelkie dane zapisane w pamięci masowej sesji są usuwane po zakończeniu pracy aplikacji.

Maksymalna dostępna pamięć masowa jest różna dla każdej przeglądarki , ale większość przeglądarek wdrożyła co najmniej zalecany maksymalny limit pamięci w3c 5MB .

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

Zawsze wyłapuj błędy bezpieczeństwa LocalStorage i przekroczenia kwot

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

  DOMException.QUOTA_EXCEEDED_ERR jest 22 , przykład .

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

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

StorageEvent " Zdarzenie storage jest wywoływane na obiekcie okna dokumentu, gdy zmienia się obszar magazynu. Gdy agent użytkownika ma wysłać powiadomienie o pamięci masowej dla dokumentu, agent użytkownika musi ustawić w kolejce zadanie wywołania zdarzenia o nazwie storage w obiekcie okna obiektu dokumentu przy użyciu usługi StorageEvent.

Uwaga: Aby uzyskać przykład z prawdziwego świata, zobacz Web Storage Demo. ^{sprawdź kod źródłowy}

Nasłuchuj Zdarzenie magazynu w dom/Window, aby wychwycić zmiany w magazynie.

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

JavaScript access using Document.cookie

Nowe pliki cookie mogą być również tworzone za pomocą JavaScript przy użyciu dokumentu.własność cookie, a jeśli flaga HttpOnly nie jest ustawiona, istniejące pliki cookie mogą być dostępne z JavaScript jako cóż.

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

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

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

Pliki cookie sesji zostaną usunięte po wyłączeniu klienta. Nie określają one dyrektyw Expires ani Max-Age.

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

Stałe pliki cookie wygasają w określonym dniu (Expires) lub po określonym czasie (Max-Age).

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

nagłówek żądania HTTP Cookie zawiera zapisane pliki cookie HTTP wcześniej wysłane przez serwer z nagłówkiem Set-Cookie. HTTP-tylko pliki cookie nie są dostępne przez JavaScript poprzez dokument.właściwość cookie, interfejsy API XMLHttpRequest i Request w celu łagodzenia ataków na Skrypty cross-site (XSS).

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

• Serwer powinien zapamiętać loginy, koszyki zakupów, wyniki gier i wszystko inne, co serwer powinien zapamiętać.]}
• [30]} Personalizacja " preferencje użytkownika, motywy i inne ustawienia
• (Zapisywanie i analizowanie zachowań użytkowników) " Pliki cookie mają domeny z nimi związane. Jeśli ta domena jest taka sama jak domena strony, na której się znajdujesz, pliki cookie są uważane 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 do ustawiającego je serwera, 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żywane głównie do Reklama i śledzenie w Internecie.

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

GitHubGist Przykład

Jako podsumowanie,

• localStorage utrzymuje się na różnych kartach lub oknach, a nawet jeśli zamkniemy przeglądarkę, zgodnie z polityką bezpieczeństwa domeny i wyborami użytkowników dotyczącymi limitu kwot.
• obiekt sessionStorage nie jest utrzymywany, jeśli zamkniemy kartę (kontekst przeglądania na najwyższym poziomie), ponieważ nie istnieje, jeśli surfujemy przez inną kartę lub okno.
• Web Storage (sesyjny, lokalny) pozwala nam zapisać dużą ilość par klucz / wartość i dużo tekstu, coś niemożliwego do zrobienia przez ciasteczko.
• Pliki cookie, które są używane do wrażliwych działań, powinny mieć tylko krótki okres użytkowania.
• Pliki cookie wykorzystywane głównie do reklam i śledzenia w Internecie. Zobacz na przykład rodzaje plików cookie używanych przez Google.
• Pliki cookie są wysyłane przy każdym zapytaniu, dzięki czemu mogą pogorszyć wydajność (szczególnie w przypadku połączeń mobilnych danych). Nowoczesne interfejsy API dla pamięci klienckiej to Web storage API (localStorage i sessionStorage) oraz IndexedDB.

Local storage: przechowuje dane o Użytkowniku bez daty wygaśnięcia te dane nie zostaną usunięte, gdy użytkownik zamknie okna przeglądarki, będą dostępne dla dnia, tygodnia, miesiąca i roku.

W pamięci lokalnej może przechowywać 5-10MB danych offline.

//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: jest to tak samo jak data przechowywania lokalnego, z tym że usunie wszystkie okna, gdy okna przeglądarki zostaną zamknięte przez użytkownika sieci.

W pamięci sesji może przechowywać do 5 mb DANE

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

Session : sesja jest zmienną globalną przechowywaną na serwerze. Każdej sesji przypisany jest unikalny identyfikator, który jest używany do pobierania zapisanych wartości.

Pliki cookie : Pliki cookie to dane, przechowywane w małych plikach tekstowych jako pary nazwa-wartość, na komputerze użytkownika. Po ustawieniu pliku cookie wszystkie żądania stron, które nastąpią, zwracają nazwę i wartość pliku cookie.

HTML Web storage udostępnia dwa obiekty do przechowywania danych na kliencie:

window.localStorage - stores data with no expiration date 
window.sessionStorage - stores data for one session (data is lost when 
the browser tab is closed)

LocalStorage:

Pamięć internetowa może być postrzegana w uproszczeniu jako ulepszenie plików cookie, zapewniając znacznie większą pojemność pamięci. Dostępny rozmiar to 5MB, co znacznie więcej miejsca do pracy niż typowe 4KB cookie.

Dane nie są wysyłane z powrotem do serwera dla każdego żądania HTTP (HTML, images, JavaScript, CSS, itp.) - zmniejszając ilość ruchu pomiędzy klient i serwer.

Dane przechowywane w localStorage pozostają do momentu wyraźnego usunięcia. Wprowadzone zmiany są zapisywane i dostępne dla wszystkich obecnych i przyszłych wizyt na stronie. Działa na zasadach tego samego pochodzenia. Tak więc przechowywane dane będą dostępne tylko w tym samym miejscu pochodzenia.

Obiekt localStorage:

Obiekt localStorage przechowuje dane bez daty wygaśnięcia. Dane nie zostaną usunięte po zamknięciu przeglądarki i będą dostępne następnego dnia, tygodnia lub roku.

// Store
 localStorage.setItem("lastname", "Smith");

// Retrieve

localStorage.getItem("lastname");

//Remove

localStorage.removeItem("lastname");

Pliki cookie:

Możemy ustawić czas ważności dla 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, należy zachować 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, images, JavaScript, CSS, itp.) - zwiększając ilość ruchu między Klientem a serwer.

SessionStorage:

Dane są dostępne tylko w oknie / zakładce, w której zostały ustawione.

Dane nie są trwałe, tzn. zostaną utracone, gdy okno / karta zamknięte. Podobnie jak localStorage, działa na zasadach tego samego pochodzenia. Tak więc przechowywane dane będą dostępne tylko w tym samym miejscu pochodzenia.

Local storage for all session, session storage for one session dane są wysyłane z powrotem do serwera dla każdego żądania HTTP. możesz również zapoznać się z tym artykułem o webstorage