使用localStorage在多个页面中存储变量?

时间:2016-12-21 16:21:03

标签: javascript html5

我正在制作工程模拟器,我希望能够有多种你可以选择的东西。在第一页上,我有单选按钮:



<div id="radiobuttons" class="container" name="buttons" align=center>

  <h2>I Want my Building to be Made of:</h2>

  <ul>
    <li>
      <input type="radio" id="brick-option" name="material" value="1" onClick="choose('Bricks')">
      <label for="brick-option">Bricks</label>

      <div class="check"></div>
    </li>

    <li>
      <input type="radio" id="wood-option" name="material" value="3" onClick="choose('Wood')">
      <label for="wood-option">Wood</label>

      <div class="check">
        <div class="inside"></div>
      </div>
    </li>

    <li>
      <input type="radio" id="stone-option" name="material" value="2" onClick="choose('Stone')">
      <label for="stone-option">Stone</label>

      <div class="check">
        <div class="inside"></div>
      </div>
    </li>
  </ul>
</div>
&#13;
&#13;
&#13;

然后,在第二页上,我想要一个滑块:

&#13;
&#13;
  <main>
    <form oninput="output.value = Math.round(range.valueAsNumber / 1)">
      <h2>
        Choose the Height of Your Building
      </h2>
      <div class="range">
        <input name="range" type="range" min="0" max="100" onchange="rangeValue=this.value;my2Function()">
        <div class="range-output">
          <output id="output" class="output" name="output" for="range">
            50
          </output>
        </div>
      </div>
    </form>
  </main>
&#13;
&#13;
&#13;

我希望两个页面都影响同一个变量chanceofdeath。我认为您使用的是localStorage,但我不确定,而且我不知道该怎么做。你能给我几行代码吗?

1 个答案:

答案 0 :(得分:1)

您可以存储chanceofdeath变量的值,如下所示:

localStorage.setItem("chanceofdeath", chanceofdeath);

然后你可以得到这样的价值:

var value=localStorage.getItem("chanceofdeath");

以下是一个小例子:jsfiddle

要查看localStorage内容,请按以下步骤操作:

1)只需按F12即可打开开发人员工具。

2)点击Application标签,您会看到localStorage's内容。