Keep $localStorage in sync between tabs

[frapontillo]

I have a problem with two concurrently open tabs:

1. I change something in tab 1, say $localStorage.myList
2. If I'm $watching the same object ($scope.list = $localStorage.myList) in tab 2, the listener is triggered, but $localStorage.myList still contains the old value!

I have noticed that the angular.element($window).bind('storage', function(event) {}) part is called in the second tab, but it never updates $storage!

Can this be fixed? I think it can by simply recreating the $storage starting from the localStorage javascript object.

[frapontillo]

OK, I think I have understood where the problem comes from. You simply have to replace, in lines 88-89, all references to event with event.originalEvent thus obtaining:

if ('ngStorage-' === event.originalEvent.key.slice(0, 10)) {
    event.originalEvent.newValue ? $storage[event.originalEvent.key.slice(10)] = angular.fromJson(event.originalEvent.newValue) : delete $storage[event.originalEvent.key.slice(10)];

The old line didn't make $localStorage sync across tabs and windows in Firefox, Chrome and IE10. This fix does the trick. ;)

UPDATE: this comment has been updated after 0.2.1 was released.

[gsklee]

Hi @frapontillo, if you open the demo in multiple tabs, you'll see that changes do sync between tabs. Could you put your code in question onto Plunker so we can further check into this issue?

[gsklee]

Okay, I think I know what's going on - you were using jQuery, which moves the browser's innate event object to event.originalEvent when the watcher is triggered.

But the truth is you don't need to use any watcher to achieve the sync'ing effect - ngStorage handles that for you outta-the-box. I would suggest you to remove the watcher in your code and see if this fixes the issue. I'll also update the doc to make this more apparent.

[frapontillo]

Yes, I have also included jQuery. The thing is, I'm using $localStorage in a factory, therefore I have no access to $scope.
Sorry for the late answer, somehow I got no notifications...

UPDATE: to make it clear, this is what I'm doing:

• A MyList factory takes care of initializing, if needed, a $localStorage array (let's call it theList) and exposes some methods, such as add, remove, getList (a function that returns $localStorage.theList), etc.
• A controller adds and removes elements from MyList.
• A controller that watches MyList.getList() and updates its own inner array, edited to make some other stuff, such as adding custom properties based on the original ones in $localStorage.theList.

[gsklee]

Hi @frapontillo, can you put your code onto Plunker so I can quickly check into this issue? Many thanks!

[frapontillo]

There you go: http://plnkr.co/edit/Pycw5R?p=preview.
Please, do the following:

1. Open two windows of the same URL
2. Add and remove people from the list by using the green and red buttons
3. Everything is synced in the same tab, not synced in different tabs (BAD)
4. Remove the jQuery reference in index.html
5. Do 1-2 again
6. Everything is synced across all tabs (GOOD)

I have tried to keep everything as simpler as I could by stripping out all of the unnecessary boilerplates, my app is at the very beginning but it's getting pretty complex already. Thank you very much!

[frapontillo]

Great, thanks! 👍

[gsklee]

http://plnkr.co/edit/pWysS4?p=preview

Should be working now, sorry for the delayed delivery =p

[frapontillo]

It does, thank you!