有没有人知道即使页面已刷新，我如何保留Javascript变量？

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

您可以使用cookie或window.name :) window.name来存储会话变量

Answer 3

根据SO上的这篇文章 ，Firefox 3.5，Safari 4和IE8支持HTML5存储 。

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