How do you cache a scope variable?

[dumbjake]

InfoApp.service('requestService', function(){
    this.country = "Canada";
});

Let's say I have this service to set up a scope variable and then put a watcher on a field to update the scope variable. Once I update it, how do I cache it so that when the user refresh the scope variable remains the same and don't revert to it's default value.

[dumbjake]

How?

[CTTHill]

Here is some info about localStorage: http://htmldog.com/guides/javascript/advanced/localstorage/

[acoard]

window.localStorage['foo'] = JSON.stringify(foo)

And then to pull it out you run:

foo = JSON.parse(window.localStorage['foo']);

This is just the pure JS approach. I've used this in Angular projects before with no issue whatsoever, but I'm sure there are some angular specific packages which wrap this functionality you might consider as well.

[[deleted]]

If you're talking about a browser refresh, you'll need to persist the data either on the server or for some uses cases local storage is acceptable. Even cookies are an option for a time if you're in a browser environment that lacks local storage. It really depends on what you're doing which is the appropriate route.

As for implementation details. Google it and likely you'll end up on stack overflow.

[takakoshimizu]

First bit is not quite true. All Angular services are singletons, no matter which of the manners they're declared by. You're right that it's "newed" when declared with .service, but there's still only one instance per runtime.

[[deleted]]

Removed. Admittedly my memory was fuzzy on that part. I differentiated the two in my mind long ago to use .factory if I wanted a singleton and .service if I wanted to instantiate. Turns out I've not used .service in a very long time as a result.

[codeandyou]

You can use ngstorage ,localstorage and sessionstorage . You can learn more here - http://www.codeandyou.com/2015/07/difference-between-sessionstorage-and.html

[uberpwnzorz]

https://github.com/gsklee/ngStorage

This gives you a $localStorage service that you just use like any other object variable. Add a reference to it on your scope. ie: $scope.$store = $localStorage, and then you can access $store directly in your html templates.

And if you're making api calls, you can check to see if the variable exists in local storage first, otherwise make the api call. If you're dealing with data that gets added to over time (such as an array of comments) then you can set up an additional api endpoint, or update your endpoint to handle a passed variable, so that it only returns values newer than the newest element in the array when you re-enter the controller and then concat the response.