我如何 go 回到我的 html 頁面而不丟失它的索引？

Question

我有兩個 html 頁面。 從第 1 頁我可以 go 到第 2 頁，從第 2 頁我可以 go 回到第 1 頁。

在第 1 頁中，我有一個顯示圖像的按鈕。 當我 go 到第 2 頁並返回到第 1 頁時，我的圖像消失了。 當我 go 回到它時，有沒有辦法不丟失我在第 1 頁上所做的事情？

<html>

<head>
    <title>
        Onclick javascript to make browser go
        back to previous page?
    </title>
</head>

<body>
<button onClick="showImage()">Button</button>
<div id="first" style="height:200px; width:200px; display:none;">
    <img src="PP.jpg"/>
</div>

<script>
    const showImage = () => {
        document.getElementById("first").style.display ='block';
    }
</script>

    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>
        Onclick javascript to make browser
        go back to previous page?
    </b>

    <h2>Page 1</h2>

    <p>
        Click on the link to get
        to the second page.
    </p>

    <a href="Page2.html">Go to Page 2</a>
</body>

</html>

我目前正在使用 onclick="history.back()" 來刷新我的起始頁面並刪除圖像

<!DOCTYPE html>
<html>

<head>
    <title>
        Onclick javascript to make browser
        go back to previous page?
    </title>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <b>
        Onclick javascript to make browser
        go back to previous page?
    </b>

    <h2>Page 2</h2>

    <p>
        Click on the button to go
        back to the previous page.
    </p>

    <button onclick="history.back()">
        Click here to go back
    </button>
</body>

</html>

Answer 1

您需要將 state 保存在存儲中，例如sessionStorage 。 您可以使用onload Event處理它。

單擊按鈕顯示圖像時，您需要將 state 保存在存儲中。 當頁面重新加載時，檢查按鈕是否被點擊，如果是則顯示容器，否則不顯示。

const showImage = () => {
 sessionStorage.setItem('showImage', 'true');
 document.getElementById("first").style.display ='block';
}
    
function myFunction() {
  if (sessionStorage.getItem('showImage') === 'true') {
   document.getElementById("first").style.display ='block';
   sessionStorage.removeItem('showImage');
  }
}

在正文標簽上添加：

<body onload="myFunction()">

例如： https://jsfiddle.net/dn09ysa1/

Answer 2

你可以使用sessionStorage :)

const showImage = () => {
  document.getElementById("first").style.display ='block';
  sessionStorage.setItem("imageState", "visible");
}
(sessionStorage.getItem("imageState") === "visible" ? document.getElementById("first").style.display ='block' : document.getElementById("first").style.display ='none');

我如何 go 回到我的 html 頁面而不丟失它的索引？

問題描述

2 個解決方案

解決方案1
0 已采納 2022-05-02 08:31:10

解決方案2
0 2022-05-02 08:40:26

我如何 go 回到我的 html 頁面而不丟失它的索引？

問題描述

2 個解決方案

解決方案1 0 已采納 2022-05-02 08:31:10

解決方案2 0 2022-05-02 08:40:26

解決方案1
0 已采納 2022-05-02 08:31:10

解決方案2
0 2022-05-02 08:40:26