CODEWITHSUNDEEP
javascriptphphtmlvariablessave
DevLiv
DevLiv

Reputation: 573

How to save a javascript variable

I have a javascript variable, which is incremented by a javascript function in a .php script, only problem is that the page reloads when the function is called, so I need some way of saving the variable to be the same when the page is either reloaded or whenever you enter it. I know you can do a local save but I am not quiet sure if it saves the variable when you leave the website.

My variable is in a html script.

<script type="text/javascript"> 

                    var varNumber= 1;
                    document.getElementById("varNumber").innerHTML = varNumber;
                    document.getElementByID("varNumber").value = varNumber;


                    function addToVariable() {
                        varNumber= varNumber+ 1 ;
                        document.getElementById("varNumber").innerHTML = varNumber;
                    }

                </script>

Upvotes: 1

Views: 7183

Answers (3)

Drakes
Drakes

Reputation: 23660

Here are three client-side methods to save JavaScript variables across page refreshes and descriptions on how long they can persist data.

Saving a JavaScript variable with local storage

Saving a JS variable using local storage is easy and convenient with modern browsers.

var get = function (key) {
  return window.localStorage ? window.localStorage[key] : null;
}

var put = function (key, value) {
  if (window.localStorage) {
    window.localStorage[key] = value;
  }
}

To save and read an object instead of a simple variable:

localStorage.yourObject = JSON.stringify(obj);

obj = JSON.parse(localStorage.yourObject || "{}");

Persistence:

User agents may, if so configured by the user, automatically delete stored data after a period of time.

For example, a user agent could be configured to treat third-party local storage areas as session-only storage, deleting the data once the user had closed all the browsing contexts that could access it.

This can restrict the ability of a site to track a user, as the site would then only be able to track the user across multiple sessions when he authenticates with the site itself (e.g. by making a purchase or logging in to a service).

However, this also reduces the usefulness of the API as a long-term storage mechanism. It can also put the user's data at risk, if the user does not fully understand the implications of data expiration.

References:

Saving a JavaScript variable with cookies

Saving a variable with cookies:

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

Persistence:

Session cookies - these are temporary and are erased when you close your browser at the end of your session.

Persistent cookies - these remain on the client hard drive until they are erased or expire.

This is ultimately user-dependent. They could be paranoid about cookies and local storage, and set them to session-only or none at all.

REF: Set cookie and get cookie with JavaScript

Saving a JavaScript variable with window.name

You could also use the window’s name window.name to store the information using a JavaScript session.

Persistence:

This only works as long as the same window/tab is used.

REF: http://www.thomasfrank.se/sessionvars.html

Upvotes: 4

StackSlave
StackSlave

Reputation: 10627

You could use AJAX to execute PHP, like:

<?php
session_start(); $r = array();
if(isset($_POST['holdNumber'])){ // assumes {holdNumber:numberHere} sent through AJAX
  if(preg_match('/^\d+$/', $_POST['holdNumber']){
    $r['heldNumber'] = $_SESSION['holdNumber'] = $_POST['holdNumber'];
  }
  else{
    // holdNumber hack
  }
}
elseif(isset($_POST['load'])){
  if(+$_POST['load'] === 1){ // assumes sending {load:1} in AJAX
    if(isset($_SESSION['holdNumber']){
      $r['heldNumber'] = $_SESSION['holdNumber'];
    }
    else{
      $r['heldNumber'] = $_SESSION['holdNumber'] = 0;
    }
  }
  else{
    // load hack
  }
}
echo json_encode($r);
?>

Upvotes: 0

Savrige
Savrige

Reputation: 3755

You can use localStorage on client side

<script>
  localStorage.setItem("mykey",99); // set a variable

  var varNumber = localStorage.getItem("mykey"); // retrieve variable
</script>

Upvotes: 3

Related Questions