如何使每个HTML页面的全局变量都具有不同的值？

Question

I am creating a game (like 4 pics 1 word) and it involves having an answer variable. There will be a button that onclick will run a function that checks the user's answer if it matches the value of this variable. There will be one puzzle per page and each puzzle/page will have a different value for answer variable. This variable must have its value set when the page loads. I looked it up and I don't see anything that would help me and I have no idea how I would do this. Thanks in advance.

Answer 1

You might need either localStorage or use Cookies for this case. If you are targeting modern browsers, you are free to use localStorage , which is a concept of HTML5.

When you are using the click event, use this:

localStorage.setItem('scores', [scores-array]);

And then when you are loading the page, try this:

localStorage.getItem('scores');

To learn more about localStorage , use this:

• MDN
• Dive Into HTML5 - LocalStorage

The other option of Cookies , depends on your browser's privacy settings. Many browsers (not many) would probably disable cookies, but you can use it as an alternate. You have limited data type storage (only strings), which can be initiated using:

document.cookie="scores=" + score_data;

And retrieving them using:

function getCookie(cname) {
    var name = cname + "=";
    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);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}
getCookie(scores);