Using AngularJS to process custom localStorage data

Question

I wrote a bookmarklet that retrieves information from a page and stores it in JSON format in local storage (converting it to a string first, of course).

I would like a web app I am writing to be able to process this data, on the fly, preferably as it gets saved to the localStorage.

Right now i can change the item in LS via the console and refresh the page and the new data appears but I would like it to be live and seamless.

Any advice on how to go about this? I found several localStorage modules for angularJS and I tried them but they don't seem to allow me to retrieve from LS if the data is already there in LS.

In response to answer:

$scope.$watch(
    function(){
        return $window.localStorage.getItem('TestData');
    },
    function(newValueInStorage){
        $scope.testingLS = newValueInStorage;
    }
)

I tried this and I still get the data displayed by just doing a {{ testingLS }} in the view template but when I go and change the TestData key in local storage via the console it doesn't update instantly. (for now, I am just testing it without the bookmarklet with just a simple string inside TestData

maurycy · Accepted Answer · 2014-07-31 11:35:44Z

1

There is few ways to do it

One of will be to populate correct model on scope when saving to localStorage

The other that I can think of at this moment is to setup watcher

$watch(
  function(){
    return localstorage object
  },
  function(newValueInStorage){
    $scope.modelFromLS = JSON.parse(newValueInsStorage)
  }
)

---edit--- as per James comment you need something that will handle the fact that data has changed in different tab and $digest process need to run for watch to be recalculated

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

window.addEventListener('focus', function(){
  console.log('focus')
  $scope.$digest()
})

edited Jul 31, 2014 at 11:35

answered Jul 31, 2014 at 10:52

maurycy

8,4201 gold badge30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Thomas Le Over a year ago

Thank you for your response. The data in local storage will already be there or be modified by a completely different website on a different browser tab via a bookmarklet. I want to run the bookmarklet on that browser tab then switch back to my local website and the page be able to detect the change in LS and reflect that on the page. I will try this $watch code. Thanks again.

James Gaunt Over a year ago

A watch alone won't work as you need something to 'happen' in the angular world for angular to trigger a digest and recalculate the watches. AFAIK switching tab isn't one of these events. There is a visibility API which will let you detect tab switches and manually trigger a digest but support is still patchy (IE10+): developer.mozilla.org/en-US/docs/Web/Guide/User_experience/… otherwise you can try hooking into window.onblur/onfocus which is also imperfect or use polling.

maurycy Over a year ago

You are right James Gaunt beside one thing, pooling is not the only solution, i've extended my answer with a plunker

Thomas Le Over a year ago

This works very well for my purposes. Thank you very much. This is an internal app for my own purposes so I am not overly worried about performance on a wide scale or anything. I really appreciate it a lot! :D

maurycy Over a year ago

I'm glad to be helpful :)

Collectives™ on Stack Overflow

Using AngularJS to process custom localStorage data

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related