Catch against IE's broken storage events

[dpogue]

Only deal with storage events that come while the document is not in focus.
See also: http://stackoverflow.com/questions/18476564/ie-localstorage-event-misfired

This caused us some problems when we were making multiple writes to localStorage and seeing data get overwritten with old values or disappear entirely:

1. Assign stuff to $localStorage.
2. $localStorage debounce happens and writes it to browser localStorage.
3. Assign more stuff to $localStorage.
4. IE fires to storage event, we update $localStorage and overwrite our changes from step 3.
5. $localStorage debounce happens and detects no changes because they were overwritten.

[futurechan]

@dpogue can you update your branch? I've had issues with IE as well.

[dpogue]

@futurechan I'm not sure I want some of the newer changes, particularly ones that will trigger extra digest cycles and slow Angular down :(

[futurechan]

@dpogue do you plan to maintain your fork indefinitely?

[futurechan]

I wonder what recourse I have. This has been clutch for firefox and chrome users.

[egilkh]

I think the best (and should maybe fix IE event handling) would be to have ngStorage's $localStorage and ngStorage's event handling use the same debounce for updating it's values. As it is now when handling storageEvents it's kind of hacky (and it does force an apply, extra digest cycle).

I'll look into that if you want me to.

[futurechan]

@egilkh that would be great. I'm willing to try too, but I can tell you right now I have no idea what I'm doing.

[abeninskibede]

Great fix! The master branch is not working at all in IE 10/ IE11 for me

[egilkh]

@abeninskibede Nice to know you think it's great!

Can you provide a error message or explanation of what is it that is not working?

[abeninskibede]

@egilkh Don't see any errors in the console.

The bug:
when I add items to an array created from $localstarage.default in IE 95% time items are are not persisted in local storage.

[egilkh]

@abeninskibede

Hmm, that is indeed strange. I must admit I almost never use $default. Would you be able to provide a failing snippet of code (minimal example) so I can dig into it (easier than me guessing your usage) ?

[abeninskibede]

    var defaultTabs = [
        { name: 'tab 1',  isSelected: true, widgets: [] },
        { name: 'tab 2',  isSelected: false, widgets: []}
    ];
    var tabs = $localStorage.$default({ tabs: defaultTabs }).tabs;

Then I push widgets using tabs[x].widgets.push(new {})