window History的pushState和replaceState方法

这篇具有很好参考价值的文章主要介绍了window History的pushState和replaceState方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

  • 参数:

    • state
      状态对象是一个JavaScript对象,它与pushState()创建的新历史记录条目相关联。 每当用户导航到新状态时,都会触发popstate (en-US)事件,并且该事件的状态属性包含历史记录条目的状态对象的副本。状态对象可以是任何可以序列化的对象。 因为Firefox将状态对象保存到用户的磁盘上,以便用户重新启动浏览器后可以将其还原,所以我们对状态对象的序列化表示施加了640k个字符的大小限制。 如果将序列化表示形式大于此状态的状态对象传递给pushState(),则该方法将引发异常。 如果需要更多空间,建议使用 sessionStorage或者localStorage。
    • title
      在此处传递空字符串应该可以防止将来对方法的更改。
    • url
      新历史记录条目的URL由此参数指定。
  • 示例:文章来源地址https://www.toymoban.com/news/detail-816509.html

 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);

三、区别

  • 共同点:
    • 仅改变网址,网页不会真的跳转,也不会获取到新的内容,本质上网页还停留在原页面。
    • 不支持跨域问题,不能重写到另一个域名下。
  • 不同点:
    • pushState:
      在历史记录中增加一条新的记录。
    • replaceState:
      将当前的历史记录给替换掉。

到了这里,关于window History的pushState和replaceState方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue学习笔记 之 History 路由 和 Hash 路由的区别 及 History 模式时,Nginx的配置方式

    一、History 模式、Hash 模式   Vue Router 是 Vue.js 官方的路由管理器,用于构建单页应用的前端路由。它允许你通过定义路由配置来映射不同的 URL 到对应的组件,实现页面间的跳转和导航。Vue Router 支持两种路由模式:history 模式和 hash 模式。 1、History 模式   在 History 模式

    2024年02月07日
    浏览(34)
  • js中history对象

    在 JavaScript 中,history 对象表示浏览器窗口的历史记录,允许你在用户在浏览器中访问过的 URL 之间进行前进和后退的导航。history 对象是 Window 对象的属性,所以在浏览器环境中直接访问即可。 history 对象提供了一系列用于操作历史记录的方法和属性,其中最常用的是以下几

    2024年02月07日
    浏览(23)
  • pwn history

           1        2  ls     3  pwd     4  pythyon      5  python      6  python2     7  pip2     8  pip2 install pwntools     9  apt update     10  yum update     11  yum  install python-dev     12  yum list |grep python     13  yum list |grep python2    14  yum list |grep python     15  pip2 install pwnt

    2024年02月13日
    浏览(27)
  • Linux基础命令-history历史记录

    Linux基础命令-alias设置别名_Linux学习中的博客-CSDN博客 文章目录 前言 一、history命令介绍 二、语法及参数  三、参考实例 总结         在工作中,经常会需要多次重复某一个命令,或者需要查看之前执行过什么命令,那么都少不了history这个命令,下面一起来看看吧。    

    2023年04月22日
    浏览(42)
  • VUE 配置history路由模式配置

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 当你使用 history 模式时,URL 就像正常

    2024年02月10日
    浏览(42)
  • Vue history和hash模式

             ~~~~~~~~                 在Vue.js中,路由模式是用来管理应用程序中不同页面之间的导航的机制。Vue Router支持两种常见的路由模式:history模式和hash模式。 History 模式:          ~~~~~~~~                 History模式使用浏览器的history.pushState API 来管理路由。它

    2024年02月12日
    浏览(35)
  • 【linux】history命令显示时间的例子

    在Linux中,你可以通过设置 HISTTIMEFORMAT 环境变量来显示命令的执行时间。这个环境变量定义了 history 命令中时间的显示格式。以下是设置和说明的步骤: 打开终端: 打开你的终端应用。 编辑配置文件: 使用文本编辑器(如 nano 、 vim 或 gedit )编辑用户的shell配置文件,通常

    2024年01月22日
    浏览(51)
  • vue项目history模式刷新404问题

    vue项目history模式部署到服务器后 ,根路径访问没有问题,但是进入其他功能再刷新页面就会出现404,因为你没在nginx或者apache配置上面加上重定向跳转。 解决办法,只需要加上这段配置: nginx配置内容: apache配置内容: 这句配置的意思是每次匹配url路径时候找不到对应静态

    2024年02月11日
    浏览(45)
  • 服务器如何配置支持history模式

    88. 服务器如何配置支持history模式 服务器配置支持 history 模式是在使用前端路由时的常见需求,它使得在使用 history API 进行页面导航时,服务器能正确地返回对应的页面内容而不是默认的 404 页面。本文将介绍如何配置服务器以支持 history 模式,并提供一个示例代码。 什么是

    2024年02月11日
    浏览(43)
  • Spring.Shell.History内置命令覆盖

    最近工作上遇到的一个小问题,在Spring Shell中,我们可以自己定义一些命令,以完成我们想要的功能,也可以使用内置命令如help、history、clear。但当一些内置命令达不到我们想要的功能时,就需要对其进行重写/覆盖。如本次遇到的histroy命令,history是一个Shell内置命令,用于

    2024年01月20日
    浏览(20)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包