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 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 ?

score 86 · Accepted Answer · edited Sep 26 '16 at 09:10

86

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

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

edited Sep 26 '16 at 09:10

Kevin Ghadyani

6,829
6
44
62

answered May 31 '13 at 11:09

Vinícius Moraes

3,506
2
22
24

This answer has more to do with `sessionStorage` versus `localStorage` than anything to do with `cookie`s like the OP wanted – just.another.programmer May 31 '13 at 11:27
@just.another.programmer i don't know if you read his question, but he is not asking about cookies, he wrote "I don't need to do any action on the server side" so he doesn't need cookie he need a localStorage or a sessionStorage – Vinícius Moraes May 31 '13 at 11:30
Thanks for your answer @Vinícius Moraes, but how are you so sure that Usability will not be impacted ? LocalStorage and cookies are not the same. For example a user that has disabled cookies would see a difference if I use localStorage, which impove the usability. 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 ? – Fabien Quatravaux May 31 '13 at 14:14
2

To detect localStorage support (in order to provide a fallback solution), I simply use `if(window.localStorage)`. – Fabien Quatravaux May 31 '13 at 14:16
1

@FabienQuatravaux the user will not see any difference because if you disabled the cookies, `cookies` will not work and `localStorage` don't either. There is not restriction `opt-in` for localStorage – Vinícius Moraes May 31 '13 at 14:17
1

You are right ! In Chrome at least, disabling cookies will also disable localStorage. And I was wrong because if "cookies" are disabled, accessing `window.localStorage` would throw an exception whereas using `Modernizr.localstorage` will just return false. Thanks a lot for your help. – Fabien Quatravaux May 31 '13 at 14:28
Exactly :D and thanks for the tip about what i wrote `drawback` instead of `fallback` – Vinícius Moraes May 31 '13 at 14:29

georg · Answer 2 · 2013-05-31T12:00:15.750

35

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.

edited May 31 '13 at 12:00

answered May 31 '13 at 11:20

georg

211,518
52
313
390

1

I don't want to compare LocalStorage and cookies _in general_, which is silly, but only in the case I described here. As I said, I do not need to have something that needs to be sent back on the server, so both cookies and LocalStorage are OK. But which one is the best ? – Fabien Quatravaux May 31 '13 at 14:02
@FabienQuatravaux: if you don't need to do anything server-side, then LS is fine. – georg May 31 '13 at 14:08
2

Funny, and now there will probably be abuse the other way around with local storage... – dsummersl Feb 06 '14 at 18:39
This makes more sense to me. – Ejaz Karim Apr 12 '18 at 11:19
LS are more comparable to session variables; a way to save data across pages (or settings or preferences for a user) without storing in a DB. – Danial Jul 14 '20 at 21:22

score 8 · Answer 3 · answered Apr 18 '16 at 17:23

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.

score 0 · Answer 4 · edited May 23 '17 at 12:10

0

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

edited May 23 '17 at 12:10

Community

1
1

answered May 31 '13 at 11:02

Isaac

11,409
5
33
45

1

-1 you can use sessionStorage, so there is no sniffing like you said. – Vinícius Moraes May 31 '13 at 11:10
cookies *can* be written. `alert(document.cookie); document.cookie = "test=nope"; alert(document.cookie); document.cookie = "test=yep"; alert(document.cookie);` – Fabien Quatravaux May 31 '13 at 14:08
Yea, but `written over`, like, the original stuff still stays – Isaac May 31 '13 at 20:09

score 0 · Answer 5 · answered Aug 30 '22 at 00:04

0

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.

answered Aug 30 '22 at 00:04

Alan N

181
2
8

1

Localstorage and cookies do not differ on this point : you can both read them using the inspector. And yes, sure, do not store sensitive data on the front side if you don't want to disclose them. – Fabien Quatravaux Sep 04 '22 at 22:58