javascript - AngualrJS: sustaining data on html refresh

Question

is there any way in which i can load few data into some cache in angular js and onrefresh of the page load these datas from cache and display it again?

Right now issue is whenever i refresh the page, the details which were shared by the sharedServices app gets reinitiated since all the JS are reloaded on refresh of a page.

I have a Login page and a home page. On success of Login, using $route i am routing to the home page and broadcasting the loginID to the Homepage controller. now when i refresh this home page or copy the url and paste in another tab, i want the same data to exist. But in my case since the htmls/javascripts are getting reloaded it getting initialized to null.

Any angular technique available here?

Answer 1

Take a look at this discussion.

For small amounts of data (<= 4k) you can use $cookieStore, but after that you'll need to look into localStorage, keeping in mind that localStorage ties your app to HTML5 compliant browsers.

If you don't mind a little state on your backend, that's an option as well.

EDIT based on first comment

It sounds like your goal is that when the user hits refresh, the page should look as though they never hit it. You'd have to persist your entire application state to localStorage (scope, DOM properties, stateful services) ANY time these change. Not sure this is advisable.

You can get close enough to be functional, though:

To expand upon the answer from above:

• Use the URL to describe application state, using Angular's $route service. I've always liked this article to explain URL and state, although the article is pretty Ember-specific.

• As far as stopping the client from reloading your scripts upon refresh there is no way to do that - the closest you'll come is having your server return a 304 (Not Modified) code for those scripts.

• Scope data and service state would have to persisted in local storage as described above.

Although the refresh problem is annoying it actually forces you to think as statelessly as possible, and stateless code is much easier to maintain and test. In case you were looking for an upside :)