How to prevent the being deleted form service after refresh?

Question

I'm using $sessionStorage in a service in angular to store date and fetch it in another page. (I'm using SPA).

I can get the data perfectly inside the page, but when I refresh the page , the data from the service is deleted.

Why angular deletes the data from the service? And what should I do to kee p it after I refresh the page?

Thank you.

do you have an example of your code? It seems you are refreshing your angular page and then, loosing all the data that was there. Angular should not change pages (refresh), it should refresh the objects inside them. To show a different page, you should change of State (with your stateProvider. ui-router 4 example). Anyway, If you need to preserve info between pages, you shoud use cookies. This is the way to achieve data being stored between html sessions. Services are used to store data in a Database (comunicating with the corresponding server-side code that will store the data). — Alejandro Teixeira Muñoz, Sep 07 '17 at 14:10
@AlejandroTeixeiraMuñoz I didn't show any code because its a general question, I just created an object inside as a variable in the service and insert some values to it — zb22, Sep 07 '17 at 14:13
Then this variable is being lost cause your session is being terminated. (When refreshing) You'll need a cookie or a db to achieve this. — Alejandro Teixeira Muñoz, Sep 07 '17 at 14:17
@AlejandroTeixeiraMuñoz Im using $sessionStorage instead of cookie, thanks — zb22, Sep 07 '17 at 14:18
Check this too!! Maybe it solves Your real problem !! https://stackoverflow.com/q/28861357/3617531 — Alejandro Teixeira Muñoz, Sep 07 '17 at 14:48
Possible duplicate of [sessionStorage is gone when browser is refreshed - Javascript](https://stackoverflow.com/questions/28861357/sessionstorage-is-gone-when-browser-is-refreshed-javascript) — Alejandro Teixeira Muñoz, Sep 07 '17 at 15:04

score 1 · Accepted Answer · answered Sep 07 '17 at 14:41

COOKIES SOLUTION

Whether using cookies is not a "wide" solution, it can solve your question without a server or a database.

Take care that if the user empties temporary internet files, data will be erased, or if the cookie is not permanent, data will be erased when finish date has arrived

First, you need to import ngCookies to your angular app

bower install angular-cookies --save

After that, remember to import the angular cookies scripts:

<script src="path/to/angular.js"></script>
<script src="path/to/angular-cookies.js"></script>

And add the dependency:

angular.module('app', ['ngCookies']);

After that, you will be able to call the ngCookies method from angular, and then store and recover the data stored in the cookie:

The example on angularJS API:

angular.module('cookiesExample', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
  // Retrieving a cookie
  var favoriteCookie = $cookies.get('myFavorite');
  // Setting a cookie
  $cookies.put('myFavorite', 'oatmeal');
}]);

Hope it helps.

Anyway, IMO, installing a server-side with a DB should be the right solution if you really want to save info from the users.

score 1 · Answer 2 · answered Sep 07 '17 at 14:53

Basically when a page is refreshed, angular reloads, services reload and all the data is lost, that is normal behavior for JavaScript stuff.

It's like you are starting from scratch basically. What you need is a way to persist data on reload and you can use something like local storage for example to persist and retrieve data.

Have a look at this for some examples:

Storing Objects in HTML5 localStorage

How to prevent the being deleted form service after refresh?

2 Answers2