Storing Variables Across Multiple Pages With localStorage? Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Storing Variables Across Multiple Pages With localStorage? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I’m making an engineering simulator, and I want to be able to have multiple things you can choose from. On the first page, I have radio buttons:

<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>

Then, on the second page, I want to have a slider:

  <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>

I want both pages to affect the same variable, chanceofdeath. I would think that you use localStorage, but I’m not sure, and I don’t know how to do it. Can you give me a few lines of code?

Answer

You can store value of chanceofdeath variable like this:

localStorage.setItem("chanceofdeath", chanceofdeath);

Then you can get value like this:

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

Here is a little example:jsfiddle

To see localStorage content please follow these steps:

  1. Simply open the Developer Tools by pressing F12.

2)Click on the Application tab and you will see localStorage's content.

We are here to answer your question about Storing Variables Across Multiple Pages With localStorage? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji