如何將變量移至另一個html文件並根據該變量更改html文件上的文本

Question

首先，我試圖將變量傳輸到另一個HTML文件，但我認為我完全錯了

這是我第一頁的代碼：

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

這是另一個html頁面的代碼：

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

我就像一個星期前才開始編碼，所以我完全迷失了。 如果有人可以幫助，那就太好了。 或者如果我沒有希望告訴我。

Answer 1

將變量作為參數傳遞給URL，例如www.mysite.com/otherpage?color=blue 。 然后使用JavaScript將參數轉換為新頁面或其他頁面上的變量。

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

我建議使用服務器端語言（例如PHP），如果您想創建電子商務，那是必須走的路。 localstorage適用於網站的簡單（而非基本）功能。

對於長期應用程序，使用服務器端語言和會話將更加容易和更好。