如何通过在javascript中单击浏览器的后退按钮将页面恢复到以前的状态

How to take back a page to its previous state by clicking the back button of the browser in javascript

本文关键字：恢复 状态 按钮 javascript 何通过 单击 浏览器      更新时间：2023-09-26

我有一个从link到form的页面。点击link后，form出现，link消失。我遇到的问题是，当我单击浏览器的back button时，URL的值会发生更改，但页面的状态不会回到以前的状态。form应该消失，而link应该重新显示。同样，当form可见时，在重新加载时，页面会返回到它的第一个状态，我需要防止这种情况发生。

代码：

<html>
<style>
  .titimmo {
    text-align: center;
    padding: 10px;
    font-size: 14pt;
    background-color: #CC3300;
    display: block;
  }
  .hidden {
    display: none;
  }
  .visible {
    display: block;
  }
  #formContainer {
    padding: 1em 0 1em 2em;
    background-color: #E8E8E8;
    margin: 1em 0 1em 2em;
    width: 88.9%;
  }
  #formContainer h4 {
    color: #FF3300;
  }
</style>
<body>
<div id="categContainer1">
  <div class="titimmo"><a href="add.php?c=realestate" id="a_categ">Real Estate</a></div>
</div>
<div id="formContainer" class="hidden">
  <form action="add.php" method="post">
    <h4>Location :</h4>
    <input type="text" name="made"/>
    <h4>Price :</h4>
    <input type="text" name="modele"/><br/><br/>
  </form>
</div>
<script>
  function stepone() {
    document.getElementById('a_categ').onclick = function () {
      document.getElementById('categContainer1').className += " hidden";
      document.getElementById('formContainer').className = "visible";
      window.history.pushState('Form', 'My form', this.getAttribute("href"));
      return false
    };
  }
  stepone();
</script>
</body>
</html>
  • 第一个问题是：如何通过单击浏览器的后退按钮将页面恢复到以前的状态
  • 第二个问题是：当页面处于第二种状态时（当表单可见时），如何防止页面在重新加载时返回到以前的状态

要使其工作，需要做两件事：

  1. 要监视浏览器后退按钮单击，请使用window.onpopstate方法
  2. 要记住表单状态，您需要将值存储在localStorage或cookie中

这是一个基本的例子：

var formVisible = localStorage.formVisible || false;
var cContainer = document.getElementById('categContainer1');
var fContainer = document.getElementById('formContainer');
function formOpen(e) {
    cContainer.className = "hidden";
    fContainer.className = "visible";
    window.history.pushState('Form', 'My form', this.getAttribute("href"));
    localStorage.formVisible = 'Y';
    return false;
};
function formClose(e) {
    cContainer.className = "visible";
    fContainer.className = "hidden";
    localStorage.removeItem( 'formVisible' );
};
if( formVisible ) formOpen();
document.getElementById('a_categ').onclick = formOpen;
window.onpopstate = formClose;


var formVisible = localStorage.formVisible || false;
var cContainer = document.getElementById('categContainer1');
var fContainer = document.getElementById('formContainer');
function formOpen(e) {
    cContainer.className = "hidden";
    fContainer.className = "visible";
    window.history.pushState('Form', 'My form', this.getAttribute("href"));
	localStorage.formVisible = 'Y';
    return false;
};
function formClose(e) {
	cContainer.className = "visible";
    fContainer.className = "hidden";
	localStorage.removeItem( 'formVisible' );
};
if( formVisible ) formOpen();
document.getElementById('a_categ').onclick = formOpen;
window.onpopstate = formClose;
.titimmo {
    text-align: center;
    padding: 10px;
    font-size: 14pt;
    background-color: #CC3300;
    display: block;
}
.hidden {
    display: none;
}
.visible {
    display: block;
}
#formContainer {
    padding: 1em 0 1em 2em;
    background-color: #E8E8E8;
    margin: 1em 0 1em 2em;
    width: 88.9%;
}
#formContainer h4 {
    color: #FF3300;
}
<div id="categContainer1">
    <div class="titimmo">
        <a href="add.php?c=realestate" id="a_categ">Real Estate</a>
    </div>
</div>
<div id="formContainer" class="hidden">
    <form action="add.php" method="post">
        <h4>Location :</h4>
        <input type="text" name="made" />
        <h4>Price :</h4>
        <input type="text" name="modele" />
    </form>
</div>

同样在Fiddle上，您可以实际看到它是如何工作的。

相关文章：