Javascript变量等于文本框值

Question

I am getting a problem when I try to pass a the pop_size variable equal to the value of the textbox. This variable will be used in along the script with the value of textbox. When I click on the button the value change and update the value of variable and then I reload the page and the variable is set to the value in the textbox.

<form name="myform1" action="" method="get"> 
    Input the number of populations<br />
    <input type="number" name="pop" id="pop" value=5 /><br />
    <input type="button" name="b1" id="b1" value="Click to set" 
           onClick="setValue()" /><br /> 
</form>  

---

function setValue() { 
    var test, test1;
    test=parseInt(document.getElementById('pop').value);
    pop_size = test;
} 

Answer 1

If I'm understanding you properly, you're having a variable set that works fine until you reload, but then gets lost.

There are two basic strategies I know of for making a variable survive a page reload.

The first one I'll list seems more complicated. I'll give you the basics of it, and can tell you more if you need. Once you have the value, append it to the address of the web page within the query string. It would be something like window.location += "?pop_size=" + pop_size; but that has a lot of inherent difficulties: you'll have to have a script that checks for the query string and extracts pop_size from it, and you should replace any existing pop_size in the query string when you update it. It can work, and you can find plenty of web pages that discuss query strings and javascript, but there are easier ways.

If you're using HTML5, the much easier solution is to use sessionStorage . It's currently supported in all major browsers , but the first link I provided (to MDN) gives you a polyfill that can give you backward compatibility. It will let you store variables on the browser that will stay live until the user closes the browser window.

To save the value, MDN recommends that you do:

sessionStorage.setItem("pop_size", pop_size);

and retrieve the values on pageLoad with:

document.getElementById('pop').value = sessionStorage.getItem("pop_size") || 5;  // if it's not found, default back to 5.

Honestly, I've never seen that syntax, and I'm not sure why MDN recommends it. The more standard usage of the sessionStorage object is even easier:

sessionStorage.pop_size = pop_size;
...
document.getElementById('pop').value = sessionStorage.pop_size || 5; // if it's not found, default back to 5.