Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are there any drawbacks to using localStorage instead of Cookies?

People also ask

Is localStorage safer than cookie?

Conclusion. Both cookies and localStorage are vulnerable to XSS attacks. However, cookie-based token storage is more likely to mitigate these types of attacks if implemented securely. The OWASP community recommends storing tokens using cookies because of its many secure configuration options.

Why are cookies better than localStorage?

Cookies and local storage serve different purposes. Cookies are primarily for reading server-side, local storage can only be read by the client-side. So the question is, in your app, who needs this data — the client or the server? If it's your client (your JavaScript), then by all means switch.

What are the disadvantages of local storage?

One of the limitations of local storage is that data is not easily accessible and harder to share with other teammates when needed. Cost. The hardware and infrastructure costs are high and adding on more space and upgrading only adds extra costs. Backup/ Recovery.

Why you should not use localStorage?

If an attacker can run JavaScript on your website, they can retrieve all the data you've stored in local storage and send it off to their own domain. This means anything sensitive you've got in local storage (like a user's session data) can be compromised.


Usability

The user will not know if you are using localStorage or a cookie. If a user disable cookies, localStorage will not work either.

Performance

There is no noticeable speed difference between the two methods.

sessionStorage

sessionStorage is only for that browser tab's session. If you close the tab, the session will be lost and the data will be lost too, it's similar to a session variable on any backend language.

localStorage

localStorage will be available for any tab or window in the browser, and will exist until it is deleted by the user or the program. Unlike a cookie, you cannot setup expiration. localStorage has a much larger storage limit as well.

Your Questions

  1. You are not using this data server side, so you don't need a cookie. localStorage is never sent to the server unlike a cookie.
  2. If the user disables the cookies, localStorage will not work either.

Fallback Example

You can use a Modernizr to verify if localStorage is available and if not, use store a cookie instead.

if (Modernizr.localstorage) {
    // supports HTML5 Storage :D
} else {
    // does not support HTML5 Storage :(
}

You can also forego Modernizr and use the check typeof Storage !== 'undefined'.


Comparing LS vs cookies is comparing apples to oranges.

Cookies and LS are completely different things for different purposes. LS is a tool that allows your client (javascript code) to store its data locally, without transmitting it to the server. Cookies is a tool for the client-server communication. The whole point of cookies is to be sent over with each request.

In the past cookies were often abused to emulate the local storage, just because it was the only possibility for a javascript application to write anything to the client's hard drive. But generally LS is not a replacement for cookies, so if you need something that both client and server should read and write, use cookies, not LS.


One point to add, unlike cookie normally shared cross protocol, the storages stick to same-origin policy. As a consequence sites share the same domain but hosted on different protocol do not share the stored data.

Say if your website need to work across http and https. For example, when user clicked the "purchase link" they will land on https secured checkout, then the checkout won't be able to retrieve the data previously stored on http site, even when they share the same domain.