CODEWITHSUNDEEP
javascripthtmlcookieslocal-storage
Fabien Quatravaux
Fabien Quatravaux

Reputation: 3786

Are there any drawbacks to using localStorage instead of Cookies?

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 trendy today, so I want to avoid it as much as possible.

Now, my new website projects almost always have pre-home launched via javascript (showing a modalbox), so I don't need to do any action on the server side. I'm considering to use HTML5 localStorage instead of cookies, with a fallback on cookies if the browser does not have localStorage. Is this a good idea? What is the impact in terms of usability, privacy protection and website performance?

Using localStorage will improve usability for users that have disabled cookies. But I know that some HTML5 features are only opt-in (like geolocalisation) in some browser. Is there any restriction like that for localStorage on any browser ? Is there any case where I will get a JS error if localStorage is available but deactivated for my site ?

Upvotes: 61

Views: 41420

Answers (5)

Alan N
Alan N

Reputation: 191

The one thing I didn't like about using 'localstorage' is that all your script code is visible when you 'inspect' (F12) the page. Go into SOURCES and from the left panel locate your website name and open it. All your code within the tags is totally visible. So if you've got some sensitive values on display, liked hashed passwords, special words, they all there for the world to see. I'm not sure what the world will do with this info, but it's not very secure.

Upvotes: 0

Vinícius Moraes
Vinícius Moraes

Reputation: 3516

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

Upvotes: 87

Norman Xu
Norman Xu

Reputation: 1532

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.

Upvotes: 8

georg
georg

Reputation: 214969

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.

Upvotes: 35

Isaac
Isaac

Reputation: 11805

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);

Upvotes: -1

Related Questions