Storing Variables Across Multiple Pages With localStorage?

Question

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?

Mihai Alexandru-Ionut · Accepted Answer · 2020-10-01 09:54:02Z

2

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:

Simply open the Developer Tools by pressing F12.

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

edited Oct 1, 2020 at 9:54

answered Dec 21, 2016 at 16:24

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nathan Chan Over a year ago

How would I add that into my radio button and slider code?

Mihai Alexandru-Ionut Over a year ago

So, When you click radio button you have to use localStorage.setItem("chanceofdeath", chanceofdeath); .Or, when you want to get value use var value=localStorage.getItem("chanceofdeath");

Mihai Alexandru-Ionut Over a year ago

If you give me more details, I can help you.

Nathan Chan Over a year ago

Should I use session storage or local storage, because I want multiple people to be able to try my program

Mihai Alexandru-Ionut Over a year ago

All people will have own localStorage on their browser.

|

Collectives™ on Stack Overflow

Storing Variables Across Multiple Pages With localStorage?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related