为什么AI的bool标志不能保存到下一页？

Question

玩家可以为这个游戏选择一个1P或AI模式。我们只是用一个旗子来跟踪它。但是，如果我们在单击时将标志更改为true，则返回到下一页时默认的false。例如：

演练:用户将选择他们想玩的模式- AI或1P。然后，他们点击play，这将带他们到一个页面选择一个主题。在选择一个主题后，它们将被路由到各自的AI或1P游戏页面。

var ai = false;

$('.mode').click(function() {
     ai = !ai;
     $(this).text(function(i, text) {
        return text === 'Select Mode: AI' ? 'Select Mode: 1P' : 'Select Mode: AI';
    });
});

$('.states').click(function() {
     // TODO flag engine to grab words from the states word bank
     if (!ai) {
        location.href = 'game.html';
      } else {
        location.href = 'roboGame.html';
      }
});

Answer 1

每次加载带有此脚本的页面时，设置var ai = false的脚本部分都会运行。尝试使用浏览器localStorage。

var ai = localStorage.getItem('ai-flag') || false;

// before navigating to next page
localStorage.setItem('ai-flag', ai);

或者，为了获得更安全的解决方案，您可以在路由时使用查询参数：

// on load
var ai = /ai=true/.test(location.search);

// on redirect
location.href = 'index.html?ai=' + ai;

第二个解决方案的好处包括能够深入地链接到特定的状态！