Difference between JavaScript cookies and web storage?

Question

Which one is best to use and why?

Answer 1

Cookies and local storage serve different purposes. Cookies are primarily for reading server-side, local storage can only be read 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. You're wasting bandwidth by sending all the data in each HTTP header.

If it's your server, local storage isn't so useful because you'd have to forward the data along somehow (with Ajax or hidden form fields or something). This might be okay if the server only needs a small subset of the total data for each request.

You'll want to leave your session cookie as a cookie either way though.

As per the technical difference, and also my understanding:

Apart from being an old way of saving data, Cookies give you a limit of 4096 bytes (4095, actually) - its per cookie. Local Storage is as big as 5MB per domain - SO Question also mentions it
localStorage is an implementation of the Storage Interface. It stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data - unlike cookie expiry.

Source: Stack Overflow
For more answers and differences: http://stackoverflow.com/questions/3220660/local-storage-vs-cookies

Answer 2

If you have to choose between both, you are probably handling them on client-side, with JS.

So, the "best to use" is the new web storage feature, designed for actual needs on client-side ( cookies was initialy designed to be stored at user computer/browser, but accessed on server side, and at a time where ressources were less -- memory, internet rate... ). So the newly Html5 feature provide much more space possible, and a basic API much simplier to handle :)

On server side, you can use the web storage, but not directly: you must use JS to interfacing, wether by using cookies ( JS use them as buffer to transmit from web storage to/from server ) or by using AJAX ( JS use the XMLHttpRequest object to share data directly with server )...

Answer 3

JavaScript cookies stores in client hard disk.. and the rest stores in server.