[教程]js返回上一个页面不刷新

在JavaScript中，返回上一个页面而不刷新可以使用以下方法：history.back() 或 history.go(1)：这两种方法都可以实现返回上一页的功能，并且不会刷新页面。它们的区别在于，...

在JavaScript中，返回上一个页面而不刷新可以使用以下方法：

1. history.back() 或 history.go(-1)：

   • 这两种方法都可以实现返回上一页的功能，并且不会刷新页面。它们的区别在于，history.back() 直接返回当前页的上一页，而 history.go(-1) 也是返回当前页的上一页，但表单里的数据全部还在。

2. window.history.pushState() 和 window.history.replaceState()：

   • 这两个方法可以用来修改浏览器的历史记录，从而实现在页面中切换而不刷新。当用户点击返回按钮时，可以通过监听 popstate 事件来捕获返回操作，并执行相应的操作。

3. 使用 a 标签和 onclick 事件：

   • 可以在 a 标签中使用 javascript:void(0) 语句来防止页面重新加载，同时使用 history.back() 方法返回上一页。例如：

     <a href="javascript:void(0)" onclick="history.back(); return false;">返回上一页</a>
     

   • 这种方法可以在用户点击链接时执行JavaScript代码，而不是导航到一个新的网址。

4. 在Vue或React中使用路由：

   • 在Vue中，可以使用 this.$router.back() 方法返回上一页，原理是访问浏览器历史记录。

   • 在React中，可以使用 useHistory 钩子和 history.back() 方法返回上一页。

5. 使用 sessionStorage 或 localStorage：

   • 可以在当前页面将要返回上一页时，在 sessionStorage 或 localStorage 中存储一个参数，在上一页中获取这个参数，用来判断是否执行某些JavaScript代码。例如：

     // 当前页面
     let box = document.querySelector('.box');
     box.onclick = function() {
         sessionStorage.setItem('isTrue', true);
         history.back();
     }
     // 上一页
     if (!sessionStorage.getItem('isTrue')) {
         console.log('js执行了');
     } else {
         sessionStorage.removeItem('isTrue');
     }
     

   • 这种方法可以在返回上一页时控制JavaScript代码的执行。

6. 处理表单数据：

   • 如果上一页包含表单数据，并且希望在返回时保留这些数据，可以使用浏览器的默认行为，即 history.back() 或 history.go(-1)，因为浏览器会自动从缓存中读取表单数据。

7. 使用 onbeforeunload 事件：

   • 当用户离开页面时，浏览器会触发 onbeforeunload 事件。可以通过监听该事件，弹出一个确认框，询问用户是否确认离开页面。如果用户选择取消离开，可以使用 event.preventDefault() 方法来阻止页面刷新。

以上方法可以根据具体的需求和场景进行选择和组合使用。在实际开发中，需要考虑浏览器的兼容性和用户体验。