Twitter: raymondcamden


Address: Lafayette, LA, USA

Interesting discovery - Chrome and Storage

01-16-2014 2,602 views Development, JavaScript 2 Comments

I ran into this today while looking at Chrome's docs for storage APIs. If you enter chrome://settings/cookies into the address bar (sorry, "omnibox" just seems like a 1980s X-Man name) Chrome will give you a report of storage data for every site that has made use of any form of storage within your browser. This report covers cookies (obviously), local storage, WebSQL, IndexedDB, and AppCache.

Be warned that when you first enter the URL, your browser may seem to hang. For me it took a good 30 seconds before anything was rendered. Also, if I did anything to filter the report and then tried to revert back to the full report, I had the same drag. (And to be clear, this impacted the entire browser. I'm testing while I write this and my textarea for the blog was unusuable at times.)

In case you're wondering, the 'floating window' effect isn't me being fancy with the screen shot. For some reason Chrome renders the report this way in the tab. As you can see, it reports each URL as well as the types of data being used. The search field in the upper right says "Search cookies", but this isn't searching the cookies, rather it is searching the domains. Clicking on a particular domain gives you a break down per each storage instance. Here is an example.

Note how each cookie is listed as well as multiple instances of "Indexed database." Each instance represents a different port, not a different database. Clicking on one reveals more details.

Unfortunately you aren't given a breakdown per each indexedDB in your domain, so for a testing domain (like 127.0.0.1) it may not be as useful. Obviously if you test against something like myhotwebapp.dev, then you can see how much data is being used. It won't break it down to individual database instances, but it would let you know how much your app is using in general.

A while ago I built a Chrome extension (LocalStorage Monitor) that alerts me to when a site is using LocalStorage. I did this less for privacy and more for curiosity sake. I've been wanting to have something similar for IndexedDB. I was happy to see that this Chrome report let me look around to see who is using the feature and surprisingly - a few sites were. I was really surprised by zapier.com, which was using nearly 5 megs of data. From what I can see they are doing quite a bit of caching with IndexedDB.

Have any of my readers explored this report yet?

2 Comments

  • Commented on 01-16-2014 at 3:04 PM
    I use this report to selectively delete cookies when I foul them up during development.
  • Commented on 01-16-2014 at 3:07 PM
    @Joe: I'd use the Dev Tools, Resources, Cookie view for that. Bit quicker imo.

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty