Local storage vs. Cookies: What's the difference?

Sometimes web pages are more than just static sources of information; sometimes they want to interact with and know something about their useres. In order to do this websites need to store data locally on the client-side. The solution for this for a while has been cookies, which are small text-files that storename:value pairs and are stored in bowels of a user's machine. Since the inception of cookies in the mid-90s there have been a couple of alternatives to cookies (userData from IE, "flash" cookies and dojox.storage, a Google Gears plugin), but the none of them were ever standardized or homogenized. The newest, and in my opinion the most promising, solution is HTML5 local storage.

Cookies

Pros

  • Legacy support (it's been around forever)
  • Persistent data
  • Expiration dates

Cons

  • Each domain stores all its cookies in a single string, which can make parsing data difficult
  • Data is unencrypted, which becomes an issue because...
  • ... though small in size, cookies are sent with every HTTP request
  • Limited size (4KB)
  • SQL injection can be performed from a cookie
 

Local storage

Pros

  • Support by most modern browsers
  • Persistent data that is...
  • ... stored directly in the browser
  • Same-origin rules apply to local storage data
  • Is not sent with every HTTP request
  • ~5MB storage per domain (that's 5120KB)

Cons

  • Not supported by anything before:
  • IE 8
  • Firefox 3.5
  • Safari 4
  • Chrome 4
  • Opera 10.5
  • iOS 2.0
  • Android 2.0
  • If the server needs stored client information you purposefully have to send it. [3]

Conclusion

Based on my comparison I think that local storage is the logical successor of cookies for storing client-side data. While cookies were originally created as a work-around, local storage has been designed with a purpose (plus you have session storage and database storage availabe as well.)
Local storage is easier to work with because you don't have to parse a string to get data. Instead you can make a call for the variable name and it's value is returned. The same applies with creating and deleting data as well.
For saving client-side data I believe local storage wins. As someone on the stackoverflow boards pointed out however, if your server needs information from a client cookies will be a better solution. But if you just want to save user-prefs, num vists, or other stuff like that choose local storage.
Until everyone on the Web starts using HTML5-compatible browsers cookies will still be king.

Sources