1

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>
Improve this question
5
  • is it global for the server or global per person? Commented Mar 30, 2015 at 23:13
  • Have you looked into cookies? Commented Mar 30, 2015 at 23:14
  • then you can use cache :) Commented Mar 30, 2015 at 23:16
  • You should use $_SESSION with PHP. JavaScript will load all the code again every time the page loads. JavaScript supports localStorage and sessionStorage in newer Browsers. Depending on how the page is reloading you could also use location.hash or location.search to get a value from a URL, as well. Commented Mar 30, 2015 at 23:21
  • $_SESSION is not suitable because in every request create it's own session... Commented Mar 30, 2015 at 23:26

3 Answers 3

Reset to default
4

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

If I choose to use the local storage will it save the variable and keep even though the website is reloaded or reentered?
Usually, but it's ultimately user-dependent. They could be paranoid about cookies and local storage and set them to session-only.
@DevLiv Hello, was this answer able to help you with your issue? What were you able to implement in your solution?
yes it helped me on the way to figure out what I needed for my function, I ended up using a server side save, but this helped me on the way. Thank you very much.
3

You can use localStorage on client side

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

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

1 Comment

Some reference: developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
0

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);
?>
Improve this answer

1 Comment

Will this save the variable when the website is reloaded?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.