Clearing cache has no effect on HTML5 localStorage or sessionStorage (but clearing cookies does!)

The other day I attended a session on HTML5 and JavaScript at the East Bay HTML5 meetup. We had a demo of canvas and SVG by the folks at sparkart, a presentation on Modernizr by our host, Michael Enslow, and another on HTML5 storage by Andrew Hedges, who just posted his slides.

After Andrew’s presentation, somebody asked whether the content of HTML5 storage would survive the user clearing the cache, and nobody in attendance was certain. In retrospect, I’m sure I already knew the answer to this, somewhere in the bowels of my memory, but it eluded me at the time. But I got curious and decided to test it out:

The text boxes show what’s currently stored. Enter something in either one and click the button to store it. If you navigate to this page in a new window or tab, or quit and relaunch your browser and come back, localStorage will remain and sessionStorage will disappear.

Then try clearing your cache and reloading the page. It looks like everything survives. I only tried this in Firefox 3.6 and in Safari 4.1 and 5.0. Please try it out in the browser of your choice and leave a comment if you find different behavior anywhere. (Also, I’m not sure every detail of what I’ve done is cross-browser compatible, so please leave a comment if the basic functionality is missing in some browser that’s supposed to support this, and I’ll fix it.)

The way the Safari developer tool (the Web Inspector) lets you inspect this data suggests that it treats local storage more like cookies than like the cache. If you click on Storage, it shows three databases: “LOCALSTORAGE”, “SESSIONSTORAGE”, and “COOKIES”. Click on them and you can examine the contents of each. No sign of the cache in that panel.

This entry was posted in HTML5, Web development and tagged , , , . Bookmark the permalink.

17 Responses to Clearing cache has no effect on HTML5 localStorage or sessionStorage (but clearing cookies does!)

  1. If I recall correctly, in most browsers (IE, FF, Chrome) clearing all cookies tends to be implicitly paired with clearing localStorage. I’m not so sure about Safari.

    • Easy enough to test! Store something with the buttons above, and clear your cookies. I just did with Firefox 3.6 and interestingly enough, it cleared the session storage but did not clear the local storage. Very interesting!

      • Clearing all cookies certainly seems to clear both session and local storage for me. I noticed your example doesn’t seem to be quite using the APIs correctly though, so YMMV.

        Here’s an example properly using setItem/removeItem: http://jsfiddle.net/kfranqueiro/vFYQT/

        • Well, this is interesting! 1st, I may have misspoken last night, since I’m now not seeing storage cleared on FF with my code (tried it in both Windows and Mac). But this is still different than what you report.

          2nd, I’m definitely getting a difference between Safari and FF – running your demo in Safari (Windows), neither local nor session storage are cleared, but in FF Mac they both are, and in FF Windows only local storage is cleared, not session. So this seems to indicate the behavior is not uniform across browsers. What browser did you test it in?

          3rd, I don’t think my use of the API can explain the difference between your code and mine. Stylistic differences aside, the API difference is that you use localStorage.setItem(key, value) and localStorage.getItem(key), whereas I’m simply setting and getting localStorage.keyName (where keyName is not a variable but the explicit name of the key, which should be the same as localStorage["keyName"]). In what way is this incorrect? I understood at least your version and the ["keyName"] version to be both officially supported; and aren’t ["keyName"] and .keyName both equivalent in JavaScript?

          4th, it’s good to remember that neither your code nor mine actually clears the storage or the cookies; it just reports the results of our manually clearing the cookies in the browser. Since we clearly are both setting and retrieving the values successfully, I think the difference can’t be with the actual storage manipulation, but perhaps with the use of the text input box? If I had time I think I would redo my demo without that; and in fact maybe it’s better to skip the demo altogether and just examine the storage area with the built in dev tools / Firebug.

  2. I get the following results, testing on a modified version of my previous Fiddle (removed the textboxes for the purpose of testing this):

    http://jsfiddle.net/vFYQT/1/

    FF 3.6 win: clears both local and session immediately.
    Chrome 11: clears local immediately, not session.
    IE8/9 Win7: doesn’t clear local OR session until browser restart (but does clear local upon restart if you told it to previously).
    Safari 5 Win: NEVER clears local? (Even choosing Reset Safari with ALL options checked doesn’t seem to clear it…)

    I’m not sure whether there’s an appreciable difference between using setItem/removeItem and directly altering the objects. I figured I’d use the API methods since they’re meant to be used, so as to not take any chances. Yes, foo["bar"] and foo.bar are equivalent in JS.

    • Well, that seems to settle it. The answer to the original question (does clearing cache clear the localStorage?) is NO. But unfortunately clearing the cookies does clear the local and/or session storage… sometimes. So the answer to the real (unspoken) question, “Can I count on localStorage being persistent enough to still be there when I need it?” is unfortunately No, you can’t.

      Now here’s another puzzle… I noticed that for clearing cookies to clear the client side storage, you have to clear all the cookies. Clearing just the cookies for the domain you’re on doesn’t seem to do the trick, which is very strange since the storage is domain-based!

  3. Amar says:

    is it completely impossible for persistence of data in a browser page even if the cookies are deleted ? I need to show a demo of a html5 page whose contents in local storage persists even if cookies are deleted (not cache :( ) .

    • Hi, Amar. I’m not sure exactly what you’re asking. Clearing cookies won’t always empty the local storage. It depends on the browser. If you want to demonstrate persistence of data after cookies are deleted, you can do it — you just have to use the right browser! But you can’t count on your visitors using the “right” browser, of course.

  4. AdamLuzerio says:

    absolutely!!!! clearing cache never make the local storage clear.It will just clear the session storage. but the cookies clearing does,as you said not every times….
    and your 2nd ans will be impossible. it will never happen…..

  5. Pingback: Setting Session Variables with AJAX and Rails when appcache is present - Programmers Goodies

  6. >>and aren’t ["keyName"] and .keyName both equivalent in JavaScript?

    That is correct. (Though, due to an error in the early days specifying Javascript, you can use a variable in the first form, but not in the second. Douglas Crockford has written some harsh criticism of this and other inconsistencies in the language. His book, Javascript: The Good Parts, is the best book on the subject.)

    • Of course it’s correct. :-) What I didn’t know was that not being able to use a variable in the second form was considered an “error”. I think I would find it awkward-looking to use a variable that way!

      Been meaning to read that book for a long time!

  7. Of course, the most exciting question of all is what kinds of new software/services can be built around this functionality? The simplest and most obvious is full text editors that work in the browser. But maybe the most exciting possibilities await local storage being supported in cell phone browsers. Because then it becomes possible to build some mobile web apps that resemble native apps in many more ways.

    Sharon, I look forward to meeting you tomorrow.

  8. Sharon,

    This is slightly off topic, but it might interest you all the same. The company KissMetrics has pioneered the use of cookies that can not be deleted through any normal method that a browser own might use. KissMetrics is using e-tags to ensure that the browsers keep cookie information. Some have recently argued that KissMetrics is abusing the e-tag header in inappropriate ways. All the same, cookies that can not be deleted allows for some interesting tracking technologies.

    More information here:

    http://www.adotas.com/2011/08/hulu-caught-respawning-cookies-as-etags-enter-tracking-fray/

    http://blog.kissmetrics.com/official-kissmetrics-response-to-data-collection-practices/

    http://www.mediapost.com/publications/?fa=Articles.printFriendly&art_aid=155234

    • Wow. Interesting, but I’m not sure I approve! Giving the user the right to delete their cookies is part of the fundamental philosophy that the user owns their browser, we don’t. Same reason they get to override all your CSS if they want to; and install browser extensions (!); and hide their referrer from request headers. And probably a bunch of other things I’m forgetting. I’d have to read more, but I don’t think I’d want to be part of a project that gets around user controls that way!

  9. Pingback: harvey

  10. Pingback: jesse