retain angular variables after page refresh

Question

I\'m trying to figure out a way to keep my angular variables with page refresh / across controllers. My workflow is,

• user logs in via facebook an

Answer 1

use `localStorage.setItem("key",value);` to set the value.
use `localStorage.getItem("key");`to get the value.
use `localStorage.clear();`to clear the value which is set

Answer 2

you can use cookies

To put simple variable

$cookies.put('user', 'abc');

To save object

$cookies.putObject('objSocket', anyObject);

and to get back data from cookies use

$cookies.getObject('objSocket');

and

$cookies.get('user');

To use above code cookies.js cdnjs is :

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-cookies.min.js"></script>

Now inject $cookies into your controller and ngCookies into your app.js

for more detail https://docs.angularjs.org/api/ngCookies

Answer 3

When you refresh a page all your JavaScript context is lost (including all data saved in variables).

One way to maintaing information from one session to another is to use the browser's localStorage. In your case, you probably want to check ngStorage.

Answer 4

I did the same using $window.localStorage.

It is kind of similar to accepted answer.

var token = "xxx";
$window.localStorage.setItem("token",token);
$window.localStorage.getItem("token"); //returns "xxx"
$window.localStorage.removeItem("token"); //deletes token

Answer 5

You can use localStorage. It is really easy to use.

var token = "xxx";
localStorage.setItem("token", token);
localStorage.getItem("token"); //returns "xxx"