2

I am working on a mobile web site (mostly for Android) and I would like to store a string (around 20 characters) on client side. I wonder which way is more efficient on performance wise, local storage or cookie? I will use JavaScript to write both cookie or local storage. Server is not going to work in any part to create cookie.

I found some test results for this but they didn't seem accurate to me. And also found some questions on stack overflow but they didn't answer my question too. If is there anyone who knows a good article or test please help.

bamya
  • 416
  • 1
  • 6
  • 15
  • 1
    Performance in what scenario? Sending cookies over HTTP is relatively expensive compared to not sending them because local storage is holding everything. – EricLaw Jun 22 '13 at 00:37
  • Don't use cookies to store front end specific data. use LocalStorage, you should also consider using the frond end sqlite database. - But dont know how widely it is supported – Andreas Louv Jun 22 '13 at 00:40
  • Our web application is using the same API that our IOS application uses, so I am getting all the content by making ajax requests to our API's. When our index page comes to client side, it is like static html page but it becomes dynamic by using ajax requests. And to make these request I should store session id by using JavaScript. In this way which one is more efficient? – bamya Jun 22 '13 at 00:46
  • 1
    @mortalkombat When dealing with data that the backend needs to store to autorise a client you should use cookies or a session ID stored in a cookie. – Andreas Louv Jun 22 '13 at 00:48
  • Relevant: http://stackoverflow.com/questions/3220660/local-storage-vs-cookies (note that this is *not* a duplicate of the linked question - the linked question is asking about page loads, while this question is asking about read/write speeds and the implications of AJAX requests). – kwah Jun 22 '13 at 02:02

3 Answers3

8

Even if I can't come up with some jsPerf examples, localStorage access times should definitely be faster than reading out cookies. But thats not your only concern on that context, especially when you're dealing with mobile devices where request times and performance is cruicial.

That means, cookies will get attached to HTTP Request whereas localStorage data will not.

My suggestions clearly is the localStorage.

jAndy
  • 231,737
  • 57
  • 305
  • 359
  • +1 for considering what the actual bottleneck would be (the network), rather than being bogged down on the technical implementation detail (access times to cookies/localStorage). – kwah Jun 22 '13 at 01:12
  • 2
    here I write a string to cookie and local storage by using vanilla JavaScript and as a 3rd case I used jquery cookie. And it seems writing to local storage is much more faster. Thanks. http://jsperf.com/cookie-vs-local-storage – bamya Jun 22 '13 at 01:56
4

There is a test you can run in your browser with jsPerf here. On my Ubuntu with Chrome the test shows reading localStorage to be faster than reading cookies but writing localStorage to be slower than writing cookies.

enter image description here

Elijah Lynn
  • 12,272
  • 10
  • 61
  • 91
  • The test https://jsperf.com/localstorage-vs-objects/19 is no longer in service. If someone can find out what happened to it and find a new home for it (if it is open source) that would be appreciated. – Elijah Lynn Dec 13 '18 at 17:57
1

May I ask how you would like to measure 'efficiency' / 'performance'?

For example you might be measuring in terms of network/data usage, or perhaps you might be measuring in terms of latency, or maybe in terms of how "noticeable" it is by the user.

I also ask about how important security is on this site.

Personally I have a knee-jerk reaction against making cookies accessible via JavaScript, especially when it comes to session management. cf:

How frequently will these requests be made?

If it once/hour, once/minute, or once/second will affect the conclusion. A couple of seconds of lag at these different frequencies will all be felt by the user in different ways.

Tailor the conclusion to the situation you shall be deploying in.

The final question I have is how this session ID will be sent to the API.

Is it included in every AJAX request? Every page load? If it is in every AJAX request but not every HTTP request?

.. to actually answer your question:

Without seeing your design/intentions, without having answers to the above questions, and considering this only on a performance/latency basis: I assume that localStorage will only be of benefit as you are able to selectively choose when to transmit the session id (but this depends on the code used to 'selectively choose' - if it is being sent on every request then it shouldn't matter significantly anyway).

I would suggest having a think about whether the performance gains are required (cf premature optimisation and testing in the environment you will be deploying, rather than testing in a standalone environment) and whether the security implications are of any concern (not strictly necessary in all cases, eg ad tracking vs a banking app).

Essentially, this is a wordy way of saying "it depends"!

kwah
  • 1,149
  • 1
  • 13
  • 27
  • I am only sending session id with AJAX requests, and every time I make a request to our API I am sending our session id so that our server knows which user is it (it is making web site like a mobile application, it can only get information by AJAX requests). But this is not the case I just want to learn is writing to a cookie faster or writing to a local storage? – bamya Jun 22 '13 at 01:16
  • Like this: http://www.w3schools.com/js/js_cookies.asp or this: http://www.w3schools.com/html/html5_webstorage.asp – bamya Jun 22 '13 at 01:18
  • On top of this link it says much faster http://www.w3schools.com/html/html5_webstorage.asp . But is it comparing with the cookie written by JavaScript or written by server I am not sure. – bamya Jun 22 '13 at 01:21
  • If the session id is being sent with every request anyway (except the first? where it is being set?) then it shouldn't matter too much about how the session id is stored and individual read/writes when compared to the amount of time that will be taken to transfer the data over the network. Instinctively (I don't have numbers to hand) I assume that localStorage would provide negligibly faster read/writes and allows you to be more selective over what you are sending over the network and when. – kwah Jun 22 '13 at 01:54
  • Something else to consider is whether the browsers you are looking to support will have HTML5 capabilities. While developing for iOS you have a fairly strong idea of what is/is not supported. When opening out to other internet-enabled phones/tablets, the world is a lot more complex. Consider, for example non-smartphones made in excess of 5 years ago. This might not matter to you however (depending on who you are developing for), so this becomes yet another "it depends" :P – kwah Jun 22 '13 at 01:58