如何在 JavaScript 中只重新加载一次页面？

在本文中，我们将实现一个 JavaScript 代码，它允许我们只重新加载一次页面。

最简单的实现：

window.location.reload()

这是 JavaScript 中最简单的内置方法，可以重新加载页面，但任务是刷新页面/重新加载页面一次。

由于此 JavaScript 方法会反复重新加载页面并解决此问题，我们将使用示例中说明的Location Hash 属性。

示例 1：此示例描述了 Location Hash 属性。

• hash 属性设置或返回 URL 的锚部分，包括井号/井号 (#)。
• 使用此属性时，请勿在井号字符串中包含井号 (#)。

HTML

  

  
  
  Document

  

  
    const reloadUsingLocationHash = () => {
      window.location.hash = "reload";
    }
    window.onload = reloadUsingLocationHash();
  

  

输出： URL 从http://127.0.0.1:5500/index.html变为http://127.0.0.1:5500/index.html#reload

示例 2：在此示例中，我们将做同样的事情，但不使用location.hash属性，并且不更改/添加 hash(#) 符号到页面的 URL。

我们将使用DOM 位置 reload()方法来实现相同的目的。

HTML

  

    
    
      
    
  
        // JavaScript anonymous function
        (() => {
            if (window.localStorage) {
  
                // If there is no item as 'reload'
                // in localstorage then create one &
                // reload the page
                if (!localStorage.getItem('reload')) {
                    localStorage['reload'] = true;
                    window.location.reload();
                } else {
  
                    // If there exists a 'reload' item
                    // then clear the 'reload' item in
                    // local storage
                    localStorage.removeItem('reload');
                }
            }
        })(); // Calling anonymous function here only
    

  

  

输出：在不修改现有 URL 的情况下重新加载页面，这一切都是可能的，因为 HTML DOM 窗口本地存储。