I’ve been working with HTML5 localStorage a good bit lately on a project. It’s proved to be invaluable at storing simple data, like settings in an application requiring no authorization. I’ve noticed a couple console functions that I’m using time and time again in Chrome along the way.

Just drop any of these bad boys into the console in Chrome or Firefox, and execute. I hope they help!

View All Stored Values

for (i=0; i<=localStorage.length-1; i++) {  
  key = localStorage.key(i);  
  val = localStorage.getItem(key);
  console.log(key + " = " + val);
}

Clear All Stored Values

localStorage.clear();

Developer Tools

devtools

Chrome also offers an easy window into localStorage via Developer tools. Once you open the toolbar (cmd+option+i) go under the Resources tab, and expand Local Storage on the left. This area is pretty powerful; Not only can you remove key/value pairs, but you can edit existing data and add your own. Pretty nifty.

Update: JS Helper

Locstor.js is a pretty baller JS library for setting/getting HTML5 localStorage. It provides some nice features, such as automatic type conversion, and cookie fallbacks for older browsers. Very nifty!