相关推荐recommended
window History的pushState和replaceState方法
作者:mmseoamin日期:2023-12-02

一、history.pushState(state, title[, url])

向当前浏览器会话的历史堆栈中添加一个状态。

  • 参数:

    • state

      状态对象是一个JavaScript对象,它与pushState()创建的新历史记录条目相关联。 每当用户导航到新状态时,都会触发popstate (en-US)事件,并且该事件的状态属性包含历史记录条目的状态对象的副本。状态对象可以是任何可以序列化的对象。 因为Firefox将状态对象保存到用户的磁盘上,以便用户重新启动浏览器后可以将其还原,所以我们对状态对象的序列化表示施加了640k个字符的大小限制。 如果将序列化表示形式大于此状态的状态对象传递给pushState(),则该方法将引发异常。 如果需要更多空间,建议使用 sessionStorage或者localStorage。

    • title

      在此处传递空字符串应该可以防止将来对方法的更改。

    • url

      新历史记录条目的URL由此参数指定。

    • 示例:

       const url = `${window.location.origin}${window.location.pathname}?a=1`;
       window.history.pushState({}, "", url);
      

      二、history.replaceState(state, title[, url])

      • 参数:
        • stateObj

          状态对象是一个JavaScript对象,它与传递给 replaceState 方法的历史记录实体相关联.

        • title

          在此处传递空字符串应该可以防止将来对方法的更改。(一般忽略不写)

        • url(可选)

          历史记录实体的URL. 新的URL跟当前的URL必须是同源,否则 replaceState 抛出一个异常。

        • 示例:
           const url = `${window.location.origin}${window.location.pathname}?a=1`;
           window.history.replaceState({}, "", url);
          

          三、区别