CODEWITHSUNDEEP
javascript
J-J
J-J

Reputation: 1113

How to access javascript variable from one page to another?

I am trying to access a global variable declared from one page to another. All I want is to reset the value of the variable from another page, wherein the second page is opened in new tab or can be opened manually.

Below is the javascript code from the home page:

<script type="text/javascript">

       var IDLE_TIMEOUT = 10; //seconds
       var _idleSecondsCounter = 0;

       document.onclick = function() {
            _idleSecondsCounter = 0;
        };

        document.onmousemove = function() {
            _idleSecondsCounter = 0;
        };

        document.onkeypress = function() {
            _idleSecondsCounter = 0;
        };

</script>

This is the javascript code I used whenever I tried to reset the value of '_idleSecondsCounter' variable in another page.

<script type="text/javascript">

        document.onclick = function() {

            _idleSecondsCounter = 0;

        };

        document.onmousemove = function() {

            _idleSecondsCounter = 0;

        };

        document.onkeypress = function() {

            _idleSecondsCounter = 0;

        };

</script>

Could it be possible?

Upvotes: 1

Views: 5566

Answers (3)

Joseph Shih
Joseph Shih

Reputation: 1294

As others have mentioned, variables cannot go from page to page. You would have to use another solution to persist some value from page to page.

The below solution using localStorage as suggested by others will work for your specific example

Home Page

<script type="text/javascript">

    var IDLE_TIMEOUT = 10; //seconds

    //stores or overwrites the variable in local storage
    window.localStorage.setItem('_idleSecondsCounter', 0);

    document.onclick = function() {
        window.localStorage.setItem('_idleSecondsCounter', 0);
    };

    document.onmousemove = function() {
        window.localStorage.setItem('_idleSecondsCounter', 0);
    };

    document.onkeypress = function() {
        window.localStorage.setItem('_idleSecondsCounter', 0);
    };

</script>

Other Pages

<script type="text/javascript">

    document.onclick = function() {
        window.localStorage.setItem('_idleSecondsCounter', 0);
    };

    document.onmousemove = function() {
        window.localStorage.setItem('_idleSecondsCounter', 0);
    };

    document.onkeypress = function() {
        window.localStorage.setItem('_idleSecondsCounter', 0);
    };

</script>

To get the value back and put it into a variable, you can do this...

<script type="text/javascript">

    //retrieves value and puts it into the variable someNewVariableToStoreItIn
    var someNewVariableToStoreItIn = window.localStorage.getItem('_idleSecondsCounter');

    //parse it if you want an integer because localStorage saves things as strings
    someNewVariableToStoreItIn = parseInt(someNewVariableToStoreItIn);

</script>

Upvotes: 1

Karanvir Kang
Karanvir Kang

Reputation: 2239

You can use one of the following for your problem:

Client Cookie:

Create a new object, which has get and set public methods. Get will read the value from cookie and set will set the value in a cookie. Don't store this value in JavaScript variable. Disadvantage of this method: No real-time notification will be generated if the cookie value is changed by another tab or window. As a workaround, a JavaScript timer can be used to do periodic reads.

Server-Sent Events, Long Polling or WebSockets:

Depending on your target browser, you have to pick one or combination of the above-mentioned technologies to store the value on the server and send a notification to other browser windows or tabs. If your backend is Asp.Net, then SignalR is an excellent tool for this job. Long polling is the only one which is supported by all major browsers. WebSockets/Server-Sent events have limited support in older browsers.

Upvotes: 1

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

That's not possible if you don't wanna real time communication. Every reload of page script will be reseted

Try to use localStorage

Try like this 

// Set value in localStorage
window.localStorage.setItem("myInfo","Demo data");

// Get value from locaStorage
var getData=window.localStorage.getItem("myInfo");

Upvotes: 1

Related Questions