Does anyone know how can I keep the Javascript variable even though the page has been refreshed?

Question

Example:

1. In the main page cliked on a button (NEW), the page then will using Javascript to open a new page in a new window by calling redirectPage().

2. In the main page clicked on a button (EXIT), then page then will call confirmExit(), then closeChildWindows() to closed all popup new window before redirect to another new page.

3. However, the JS variable (childWindowHandles) will be always reset if I refresh the main page, and this cause the page unable to close all other popup window before relocated while EXIT button being clicked

Does anyone know how can I solve this problem? By able to keep the JS variable (childWindowHandles) even the main page being refresh?

var childWindowHandles = new Array();

function redirectPage(url)
{
    childWindowHandles[childWindowHandles.length] = window.open(url)
}

function confirmExit(url)
{
    closeChildWindows()
    window.location=url
}

function closeChildWindows() 
{
    for (var loop=0; loop<childWindowHandles.length; loop++) 
    {
        if (!childWindowHandles[loop].closed)
        {
                childWindowHandles[loop].close();
        }
    }
}

Answer 1

You can use cookies to persist values...

Edit: You might find useful a simple object that I use:

Usage:

// Store a key/value for 1 day:
cookieManager.set('name', 'a value', 1);

// Retrieve a value associated to a key:
var value = cookieManager.get('name');

// Remove a key/value:
cookieManager.remove('name');

Implementation:

var cookieManager = { 
  set: function (name, value, expireDays) { 
    var expireDate = new Date(); 
    expireDate.setDate(expireDate.getDate() + expireDays); 

    document.cookie = name + "=" + escape(value) + 
      ((!expireDays) ? "" : ";expires="+expireDate.toGMTString()); 
  }, 

  get: function (key) { 
    var start,end; 

    if (document.cookie.length > 0) { 
      start = document.cookie.indexOf(key + "="); 

      if (start != -1) { 
        start = start + key.length + 1; 
        end = document.cookie.indexOf(";",start); 

        if (end == -1) { 
          end = document.cookie.length; 
        }
        return unescape(document.cookie.substring(start,end)); 
      }
    }
    return ""; 
  },

  remove: function (key) {
    this.set(key, '', -1);
  }
}

Answer 2

You can use cookies or window.name:) window.name to store session variables

Answer 3

Per this post here on SO, Firefox 3.5, Safari 4, and IE8 support HTML5 Storage.

Answer 4

Or use PersistJS which simplifies your access to whichever back-end storage mechanisms are available. (But cookie-less)

Answer 5

Use window.name

Positives:

• it will live for the time of browser session - user closes window and it's gone
• it won't put additional traffic on the wire like cookies do
• it works even when cookies are disabled
• at least 2MB space (Opera's limit is this low, other's have 32/64MB)

I also suggest you use javascript object for storing various values and serialize it using JSON and put that string into window.name.

Just make sure you don't persist any vulnerable data inside... For security reasons.

Answer 6

You can use sessionStorage.

Check this out:

html5_webstorage