如何使用按鈕在2個html頁面之間傳遞數據

Question

我試圖通過單擊另一個HTML頁面上的按鈕來更改一個HTML頁面上的按鈕的類。

• 我是初學者/中級程序員

這是我應該單擊按鈕的頁面（分別為html和js）：output.html

<button class="waves-effect waves-light btn" id = "wutwut" 
onclick="testJS()">What Now?</button>

$("#wutwut").click(function() {
    console.log("let's go");
    var tutorial= $("#replace").html
    console.log(tutorial);
    $(function testJS(){
        var b = document.getElementById(tutorial)
        url='https://bili.pythonanywhere.com/tutorialsfinal.html?tutorial=' + encodeURIComponent(b)
        document.location.href=url;
        console.log("let's get this party started");

    });

});

這是應該更改按鈕類的頁面（分別為html和js）：tutorialsfinal.html

<script> $('.collapsible').collapsible('open', 1);</script>

  <ul class="collapsible popout" data-collapsible="accordion">
    <li>
      <div class="collapsible-header" id="soccer"><i class="material-icons"></i>Soccer</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
   </li>
   <li>
     <div class="collapsible-header" id="basketball"><i class="material-icons"></i>Basketball</div>
     <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header" id="football" ><i class="material-icons"></i>Football</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>








window.onload = function () {
    var url = document.location.href,
      params = url.split('?')[1].split('&'),
      data = {}, tmp;
    for (var i = 0, l = params.length; i < l; i++) {
      tmp = params[i].split('=');
      data[tmp[0]] = tmp[1];
}

function tutorialmatch(){
console.log("let's go");
$('#replace').removeClass('collapsible-header').addClass('collapsible-header active');


tutorialmatch();
console.log(tutorialmatch);

我最初以為這應該可行，但是當我運行代碼時，第一個控制台消息（“讓我們開始這個聚會”）沒有顯示。

任何幫助/建議都非常感謝！ 謝謝！

Answer 1

使用localStorage。

在第一個功能中設置值

$(function testJS(){
        //rest of the code
        localStorage.setItem('keyName',value)
        document.location.href=url;
        console.log("let's get this party started");

    });

在第二頁中，使用getItem檢索值

function tutorialmatch(){
var getValue = localStorage.getItem('keyName')
$('#replace').removeClass('collapsible-header').addClass('collapsible-header active');
}