How can I move a variable over to another html file and change the text on the html file based on the variable

Question

First, Im trying to transfer a variable to another html file, but I think I have it totally wrong

This is my code for the first page:

<input type="text" placeholder="Enter Storage Size" name="storage size" id="storagesize" required>
<label for="Colour"><b>Colour</b></label>
<input type="text" placeholder="Enter Colour" name="Colour" id="colour" required>

<label for="Features"><b>Features</b></label>
<form>
<label class="container">FingerPrint Scanning Security 50$
<input type="checkbox" value="50" id="fingerprint">
<span class="checkmark"></span>
</label>

<label class="container">Feature Two 50$
<input type="checkbox" value ="50" id="two">
<span class="checkmark"></span>
</label>

<label class="container">Feature Three 50$
<input type="checkbox" value ="50" id="three">
<span class="checkmark"></span>
</label>

<label class="container">Feature Four 50$
<input type="checkbox" value ="50" id="four>
<span class="checkmark"></span>
</label>
</form>

<script>
var feature;
var size = document.getElementById("userInput").value;
var colour = document.getElementById("userInput").value;
localStorage.size = size
localStorage.colour = colour
('fingerprint').click(function() {
feature ="50";
localStorage.feature="50";
});
('two').click(function() {
feature ="50";
localStorage.feature="50";
});
('three').click(function() {
feature ="50";
localStorage.feature="50";
});
('four').click(function() {
feature ="50";
localStorage.feature="50";
 });

</script>`

This is the code for the other html page:

  <script>
  var size
  var colour
  var feature
  size = localStorage.size;
  colour = localStorage.colour;
  feature = localStorage.feature;
  document.getElementById("colour").innerHTML = colour;
  document.getElementById("sizetotal").innerHTML = size;
  document.getElementById("featureprice").innerHTML = feature;
  </script>

  <h4>Cart <span class="price" style="color:black"><i class="fa fa-shopping-cart"> 
  </i> <b>4</b></span></h4>
  <p id="colour"> <span class="price">0</span></p>
  <p id="sizetotal"> <span id="sizeprice" class="price"></span></p>      
  <p>Features<span id ="featureprice" class="price"></span></p>
  <hr>
  <p>Total <span class="price" style="color:black"><b></b></span></p>

I just started coding like a week ago, so Im totally lost. If someone can help that would be great. Or if im hopeless tell me.

Answer 1

Pass the variable as an argument in the URL, eg www.mysite.com/otherpage?color=blue . Then use JavaScript to get the argument into a variable on the new/other page.

var getArg = getArg();
var color = getArg['color'];

function getArg(param) {
    var vars = {};
    window.location.href.replace(window.location.hash, '').replace(
        /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
        function(m, key, value) { // callback
            vars[key] = value !== undefined ? value : '';
        }
    );
    if (param) {
        return vars[param] ? vars[param] : null;
    }
    return vars;
}

Answer 2

I suggest using a server side languaje such as PHP, if you want to create an ecommerce it's the way to go. localstorage is fine for simple (and not fundamental) functionality of your website.

Using a server side language and sessions will be easier and better for a long term application.