How to Remember the Value of a Variable After Reloading the Page

How to remember the value of a variable after reloading the page?

You've already stored login after the user logged in in the LoggedinService's login method.

Now even if you reload the page, you will be able to get it from there using:

// Add this property in your app.component.ts
loggedIn = localStorage.getItem('login');

This will return 'true' if the user was logged in before the page reload.

You can then create these classes:

.btn-outline-success {
  background: 'green';
}

.btn-outline-danger {
  background: 'green';
}

And then in your app.component.html dynamically use these classes using [ngClass] syntax like this:

<li class="nav-item">
  <a 
    class="btn" 
    [ngClass]="loggedIn === 'true' ? 'btn-outline-success': 'btn-outline-danger'"
    (click)="this.loggedInService.loggedIn ? logout() : logIn()">
    {{this.loggedInService.loggedIn? 'Exit' : 'Enter'}}
  </a>
</li>

How to get JS variable to retain value after page refresh?

This is possible with window.localStorage or window.sessionStorage. The difference is that sessionStorage lasts for as long as the browser stays open, localStorage survives past browser restarts. The persistence applies to the entire web site not just a single page of it.

When you need to set a variable that should be reflected in the next page(s), use:

var someVarName = "value";
localStorage.setItem("someVarKey", someVarName);

And in any page (like when the page has loaded), get it like:

var someVarName = localStorage.getItem("someVarKey");

.getItem() will return null if no value stored, or the value stored.

Note that only string values can be stored in this storage, but this can be overcome by using JSON.stringify and JSON.parse. Technically, whenever you call .setItem(), it will call .toString() on the value and store that.

MDN's DOM storage guide (linked below), has workarounds/polyfills, that end up falling back to stuff like cookies, if localStorage isn't available.

It wouldn't be a bad idea to use an existing, or create your own mini library, that abstracts the ability to save any data type (like object literals, arrays, etc.).

---

References:

• Browser Storage - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
• localStorage - https://developer.mozilla.org/en-US/docs/DOM/Storage#localStorage
• JSON - https://developer.mozilla.org/en-US/docs/JSON
• Browser Storage compatibility - http://caniuse.com/namevalue-storage
• Storing objects - Storing Objects in HTML5 localStorage

saving variable value and retrieve it after page refresh

JavaScript:

1. localStorage (HTML5 browsers only) - you could save it as a property of the page's local storage allowance

2. save it in a cookie

3. append the variable to the URL hash so it's retrievable via location.hash after the refresh

PHP

1. save it as a session variable and retrieve it over AJAX each time the page loads

2. save it in a cookie (might as well do the JS approach if you're going to cookie it)

Any PHP approach would be clunky as you'd have to first send the value of the variable to a PHP script over AJAX, then retrieve it over AJAX after reload.

how to remember input data in the forms even after refresh page?

on the page where your form is submitting do something like this

    session_start();
    $_SESSION['data'] = $_POST['data'];
    $_SESSION['data_another'] = $_POST['data_another'];

and than you can access those session variables any where like this

    session_start(); // this should be at the top of the page before any html load
    <input type="text" name="name" value="<?php echo $_SESSION['data'];?>"/>

refresh your page on success call like this

     $.ajax({
           type: "POST",
           url: "yourfile.php",
           data: 'data='+ data,
           success: function(){
               location.reload();
           }
       });

---

Related Topics