Local Storage vs Cookies

user_259311 0
Viewed 530579

I want to reduce load times on my websites by moving all cookies into local storage since they seem to have the same functionality. Are there any pros/cons (especially performance-wise) in using local storage to replace cookie functionality except for the obvious compatibility issues?

local-storage httprequest browser cookies html
9 Answers

Cookies:

  1. Introduced prior to HTML5.
  2. Has expiration date.
  3. Cleared by JS or by Clear Browsing Data of browser or after expiration date.
  4. Will sent to the server per each request.
  5. The capacity is 4KB.
  6. Only strings are able to store in cookies.
  7. There are two types of cookies: persistent and session.

Local Storage:

  1. Introduced with HTML5.
  2. Does not have expiration date.
  3. Cleared by JS or by Clear Browsing Data of the browser.
  4. You can select when the data must be sent to the server.
  5. The capacity is 5MB.
  6. Data is stored indefinitely, and must be a string.
  7. Only have one type.
user_52303580

It is also worth mentioning that localStorage cannot be used when users browse in "private" mode in some versions of mobile Safari.

Quoted from WayBack Archive of MDN topic on Window.localStorage back in 2018:

Note: Starting with iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short. Safari Mobile's Private Browsing mode also prevents writing to localStorage entirely.

user_39024610

Key Differences:

Capacity:

  • Local Storage: 10MB
  • Cookies: 4kb

Browser Support:

  • Local Storage: HTML5
  • Cookies: HTML4, HTML5

Storage Location:

  • Local Storage: Browser Only
  • Cookies: Browser & Server

Send With Request:

  • Local Storage: Yes
  • Cookies: No

Accessed From:

  • Local Storage: Any Window
  • Cookies: Any Window.

Expiry Date:

  • Local Storage: Never Expire, until done by javascript.
  • Cookies: Yes, Have expiry date.

Note: Use that, what suits you.

user_105894260

Cookie:

  • is accessible by JavaScript so Cookie's data can be stolen by XSS attack(Cross Site Scripting attack) but setting HttpOnly flag to Cookie prevents the access by JavaScript so Cookie's data is protected from XSS attack.

  • is vulnerable to CSRF(Cross Site Request Forgery) but setting SameSite flag with Lax to Cookie mitigates CSRF and setting SameSite flag with Strict to Cookie prevents CSRF.

  • must have expiry date so when expiry date passes, Cookie is deleted automatically so even if you forgot to delete Cookie, Cookie is deleted automatically because of expiry date.

  • is about 4KB as a common size (depending on browsers).

Local Storage:

  • is accessible by JavaScript so Local Storage's data can be stolen by XSS attack(Cross Site Scripting attack) then, as logn as I researched, there are no easy preventions for Local Storage from XSS attack.

  • is not vulnerable to CSRF(Cross Site Request Forgery).

  • doesn't have expiry date so if you forgot to delete Local Storage data, Local Storage data can stay forever.

  • is about 5MB as a common size (depending on browsers).

I recommend using Cookie for sensitive data and Local Storage for non-sensitive data.

user_81724390
Related