73

I am working in an app where I need to keep some data during the user is logged in and I have that question, what is the difference among localStorage, sessionStorage, cookies ???

I was asking what can I use in order to persist some data in the DOM, even if the user refresh the page, some people says: use sessionStorage, or localStorage, then, someone came up with the idea of use ngCookies because it works in every browser, but, which should I use ?

Non
  • 8,409
  • 20
  • 71
  • 123
  • 1
    I think [this link](http://stackoverflow.com/a/19869560/1252158) will explain this in broader way – Summved Jain May 20 '16 at 16:23
  • 1
    Also note that session cookies live as long as browser WINDOW is open (not tab in which they were set) BUT sessionStorage is nulled as soon as you close the tab... – yar1 Jul 05 '16 at 12:35

6 Answers6

112

localStorage and sessionStorage are both so-called WebStorages and features of HTML5.

localStorage stores information as long as the user does not delete them.

sessionStorage stores information as long as the session goes. Usually until the user closes the tab/browser.

cookies are simply cookies, which are supported by older browsers and usually are a fallback for frameworks that use the above mentioned WebStorages.

In contrast cookies can store way less information then WebStorages and the information in WebStorages is never transferred to the server.

Keep in mind that the EU has a regulation that requires websites to inform their users about the usage of cookies. I dont know whether this also applies to WebStorages

Trenton
  • 11,678
  • 10
  • 56
  • 60
Jonathan
  • 3,614
  • 3
  • 21
  • 30
  • what do you recommend me to use ? the data I need to persist is only the username and the email in the DOM. Is not an app that requires full security. – Non Apr 30 '15 at 06:02
  • 3
    Depends, if you need old browsers (pre HTML5) to be supported, you want cookies. Else I personally would use storages (localStorage if you need the data 'forever', else sessionStorage) because I like using new features ;) – Jonathan Apr 30 '15 at 06:03
  • 13
    "I dont know whether this also applies to WebStorages" — It does. https://ico.org.uk/for-organisations/guide-to-pecr/cookies-and-similar-technologies/ – Quentin Oct 13 '15 at 18:08
  • 2
    EU regulation only requires consent for cookies/storage if they're not an essential part of your service. Cookies for advertising require consent, cookies for a login form or shopping cart do not require consent (see Quentin's link for clarification). – Abhi Beckert Feb 08 '19 at 02:32
19

sessionStorage object: The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. it is not available when a file is run locally.

Data stored in the sessionStorage object is accessible only from the page that initially stored the data; so this doesn't meet your requirement

localStorage object: Data stored using the localStorage object is persisted until it is specifically removed via JavaScript or the user clears the browser’s cache.

Data stored in the localStorage object is accessible only from the domain that initially stored the data.

For your case, I think you make consider about using cookie or session, pls. note cookie has 4K size limitation per server.

Jackie Dong
  • 813
  • 1
  • 5
  • 20
  • I dont think what you mentioned second about sessionStorage is correct, atleast not in the context of angular. According to the specs each sessionStorage is associated with the top-level browsing context, which would be the same for every page in an angular app. – Jonathan Apr 30 '15 at 06:12
  • all I need to persist is the user info, like email, username and maybe a picture, would be that enough for use 4K session or cookies? – Non Apr 30 '15 at 15:48
  • it should be ok to put email and username in cookies, I don't think you need to save pictures – Jackie Dong May 04 '15 at 01:20
5

Addition to other answers, WebStorages cannot access subdomain and/or parent domain.

Ali
  • 1,982
  • 1
  • 15
  • 16
5

LocalStorage - Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data. Storage limit is the maximum amongst the three

SessionStorage - The sessionStorage object stores data only for a session, meaning that the data is stored until the browser (or tab) is closed. Data is never transferred to the server. Storage limit is larger than a cookie (at least 5MB).

Cookie - Stores data that has to be sent back to the server with subsequent requests. Its expiration varies based on the type and the expiration duration can be set from either server-side or client-side (normally from server-side). Cookies are primarily for server-side reading (can also be read on client-side), localStorage and sessionStorage can only be read on client-side. Size must be less than 4KB. Cookies can be made secure by setting the httpOnly flag as true for that cookie. This prevents client-side access to that cookie.

David Jones
  • 4,766
  • 3
  • 32
  • 45
Anush
  • 151
  • 1
  • 5
1

localStorage : 1. Data Limit : 5 MB 2. Data sent for every http request : no

sessionStorage : 1. Data Limit : 5 MB 2. Data sent for every http request : no 3. Data will be cleared once window or tab is closed

I would say, use localstorage/sessionStorage if data is non sensitive else use cookies

Prashant Biradar
  • 251
  • 2
  • 3
-1

Cookies are just hold 4kbs data and as expiry time.

localStorage are permanent cookies holds 4 MB data it will delete when user clears cache

Shivappa
  • 11