4

Bug with Chrome's localStorage implementation? explains very well the spec, and how it behaves differently in Opera and IE9.

But, now what?

That will really mess up my code (any code) that relies on the implementation to be one way on a browser, when it's another.

How do I test to know whether the event is firing on the window that invokes it or not?

The only thing I can figure is to use a setTimeout() to wait and see if the event is firing in the window that calls it or not, and then do something if it doesn't. But, that can make some terrible bugs when the storage event is called in quick succession.

In my case I need the event firing for all windows, not all but the one calling it. In Chrome that implements it to the spec correctly this is just a matter of adding an extra function after adding to the localStorage.setItem(), but then in IE, Firefox3.6 and Opera it's going to effectively do that twice. I could also have different code based on browser, but I should be testing for compatibility not browser version.

Is there a way to "patch" all browsers with localStorage support to have the event handled the same way on them all?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
sadtaco
  • 151
  • 5
  • 1
    Seems like a compatibility test is possible by once 'at start' writing a key that contains a unique id, e.g. a timestamp and then recording when that comes back. If the event did not come back then your code should go ahead and fire it locally when changing storage. Otherwise bypass that logic. Rough idea here...not an Answer. – joshp May 12 '12 at 21:22
  • 1
    Yeah. I was thinking of that too, but i also falls under the "possibly buggy and not good practice". I think the solution would need to be similar to those patches that add JSON parse and stringify support to browsers without it, but in this case overwriting the localStorage event. I have no idea where to begin on doing such a thing, though. I don't even know how to see what the current code looks like, or to figure out what functions I'd even need to overwrite, if that's even possible. – sadtaco May 12 '12 at 21:28
  • When you wrestle with pigs (wayward browsers), you get dirty. It would be fun to write a library like that if one doesn't already exist. Question is what is the best capability test. I'll post an answer if I find one. – joshp May 12 '12 at 23:54
  • Since the problem exists on more users than it does not, it would make sense to forget that event and throw your own when you set the storage. You can save an object with last value and new value, like the spec, and read it when you handle your event. – kennebec May 13 '12 at 00:04

2 Answers2

1

I some what solved my own problem

var localStorageSpecCompliant = true;
var specCompliantTestVal = new Date().getTime();
function onStorage(ev) {
    if( ev.key == "specCompliantTest"+specCompliantTestVal ){
        localStorageSpecCompliant = false;
    }
    localStorage.removeItem("specCompliantTest"+specCompliantTestVal);
};
if( window.addEventListener ){  
    window.addEventListener("storage", onStorage, false);  
} else { window.attachEvent("onstorage", onStorage); }

localStorage["specCompliantTest"+specCompliantTestVal] = "This tests if the browsers localStorage storage event is spec compliant or ont.";

localStorage_setItem = function(key, value){
    localStorage[key] = value;
    if( localStorageSpecCompliant ){
        var dirtyFakeEvent = {"key":key, "newValue":value};
        onStorage(dirtyFakeEvent);
    }
}

But some sort of patch that always makes the event work the same would be far, far better. This way is not ideal. I couldn't figure out how to fake-ly fire the real "storage" event so I called the function directly.

A framework that simply fixes compliance would be awesome. I don't have a problem with localStorage not existing in IE7. But functionality being completely different in one browser or another, different from spec, is so problematic.

sadtaco
  • 151
  • 5
0

I was curious about this and looked at several js storage libraries. The one I found so far that supports the storage event is the YUI 2 Storage Utility. It would be interesting to take a look and see if it normalizes behavior across browsers. There's also a library based on YUI3 that looked interesting and advertises a change event and a storage ready event.

YUI 2 Storage

YUI 3 based Storage Lite

These may involve more dependencies than you want. They also may offer ways to learn how to solve the problem more simply.

Those libaries also address the question, what to do with browsers that don't offer HTML5 style storage.

joshp
  • 1,886
  • 2
  • 20
  • 28
  • I would hate to add another library when I already use jQuery and underscore. That API does look alright though. It seems it includes a cross-window event when the storage is changed, which is a bit of the issue here. I prefer to simply use localStorage though. I looked a similar plugin for jQuery a while back and wasn't impressed with it. – sadtaco May 13 '12 at 01:27