Are there any drawbacks to using localStorage instead of Cookies?

Question

On my previous websites, I used to use a cookie to display a pre-home page only on the first visit. That worked great (see for example here), but using cookies is not so tre

Answer 1

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'.

Answer 2

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.

Answer 3

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.

Answer 4

It doesn't look easy for the server to read the localStorage. That may come in handy though, knowing your data is all client-side, making it safe from sniffing.

Cookies can't be written over, only added to and read:

alert(document.cookie);
document.cookie = "nope";
alert(document.cookie);