Send Data one page to another page in HTML

问题

Here I try to send data from one page to another HTML page. I tried with the window.load method and localStorage but unable to get the output. I have a table with title and button when click on button current row title will be displayed in the b.html page. Can anyone suggest me in the right direction.

a.html

<body>
 <table class="at-items-block">
  <thead></thead>
   <tbody>
          <tr>
          <td class="at-int-sn">
        <h2 class="at-IntHdr">test</h2>
        <ul>
            <li><b>bbb</b> bbb</li>
            <li><b>bb</b> bb</li>
        </ul>
    </td>
    <td class="at-int-dl1">
        <h2>6.2<span class="time-sep">hrs</span></h2>
        <span class="todownload">to download*</span>
    </td>
    <td class="at-int-dl2">
        <h2>55<span class="time-sep">min</span></h2>
        <span class="todownload">to download*</span>
    </td>
    <td class="at-int-dl3">
        <h2 class="at-IntHdr">11<span class="time-sep">min</span></h2>
        <span class="todownload">to download*</span>
    </td>
    <td class="at-int-price">
        <h2 class="atr"><span>$</span>1444<span class="per-month"> per mon*</span></h2>
        <span class="check-info">text here<br>
        text here<br>
        text here</span>
    </td>
    <td class="at-item-btn"><a href="b.html" class="at-int-btn">send</a></td>

</tr>
<tr>
  <td class="at-item">
    <h2 class="at-title">Title2 Here</h2>
  </td>
  <td class="at-item-btn"><a href="b.html">send</a></td>
</tr>
 </tbody>
  </table>
 </body>
  <script>
   window.onload = function() {
   var getTitle = document.getElementsByClassName("at-title");
  localStorage.setItem("itemsTitle",getTitle);
}
</script>

b.html

<div class="titleFetch">
<div class="titleHere"></div>
<div class="check-info"></div>
</div>
  </body>
 <script>
  window.onload = document.getElementsByClassName("titleFetch").innerHTML = 
  localStorage.getItem("itemsTitle");
  </script>

回答1:

The JS which you have provided in index.html (first html) page will not do the things, you need to replace it with the following,

    window.onload = function() {

    const buttons = document.querySelectorAll('.at-item-btn');

    const passData = (getTitle) => {
        localStorage.setItem("itemsTitle",getTitle);
    }

    buttons.forEach((el,i) => {
        el.addEventListener('click', passData.bind(this, el.previousElementSibling.textContent))
    })

 }

Here you need to get all the buttons and need to make addEventListener() for each button and pass the respective title as parameter to the function and set it in localstorage setItem like,

const passData = (getTitle) => {
    localStorage.setItem("itemsTitle",getTitle);
}

Then in b.html, change the script to replace the received title like,

window.onload = function() {
    document.getElementsByClassName("titleFetch")[0].textContent =
    localStorage.getItem("itemsTitle");
}

Working example here

回答2:

In my Opinion the best way would be the PHP-GET methods (example how to in PHP)

$var = $_GET['mode']
//to Use this you have to change your link, for example b.html?mode=YourString
//here you have the string right from the '='-character

alternatively if you want to use this method with JavaScript-Only you can use this method

let endingString = "";
let workingString = window.location.href;
let boolpath = false;

for(var i = 0; i < workingString.length; i++)
{
    if (boolpath)
    {
        endingString += workingString[i];
    }
    else if (workingString[i] == '?') {
        boolpath = true;
    }        
}
//to Use this you have to change your link, for example b.html?hallo123
//here you have the complete string in the right of the '?'-mark
//b.html?hallo123 -> endingString="hallo123"

I personally recommend the JavaScript-aproach

来源：https://stackoverflow.com/questions/60389422/send-data-one-page-to-another-page-in-html

标签

javascript

jquery

html