JavaScript历史状态管理

1、API

（1）history.pushState：能够在不加载新页面的情况下改变浏览器的 URL

history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");

执行 pushState() 方法后，新的状态信息就会被加入历史状态栈，而浏览器地址栏也会变成新的相对 URL。

但是，浏览器并不会真的向服务器发送请求，即使状态改变之后查询 location.href 也会返回与地址栏中相同的地址。另外，第二个参数目前还没有浏览器实现，因此完全可以只传入一个空字符串，或者一个短标题也可以。而第一个参数则应该尽可能提供初始化页面状态所需的各种信息。

因为 pushState() 会创建新的历史状态，所以你会发现“后退”按钮也能使用了。按下“后退”按钮，会触发 window 对象的 popstate 事件.

（2）replaceState

要更新当前状态，可以调用 replaceState() ，传入的参数与 pushState() 的前两个参数相同。调用这个方法不会在历史状态栈中创建新状态，只会重写当前状态。

注：

（1）新URL必须和当前URL在同一个源下;否则，pushState() 将丢出异常。

（2）pushState()方法绝不会导致hashchange 事件被激活。

2、示例

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>JavaScript历史状态管理</title></head><body><div id="historyEvent">history API</div><script>var historyEvent = document.getElementById('historyEvent');historyEvent.onclick = function() {//pushState 不能修改网页标题
                history.pushState(null, '新标签页标题', '/123');document.title = '新标签页标题'}</script></body></html>

JavaScript历史状态管理相关推荐

javaScript 内存管理机制
大家好,今天分享的主题为 JavaScript 内存管理机制,本次分享将从以下三部分进行讲述: js 内存管理与 js 垃圾常见的 GC 算法 V8 引擎的垃圾回收 js 内存管理与 js 垃圾关 ...
HTML5历史状态管理history API-pushState/replaceState与popstate事件
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و [本文源址:http://blog.csdn.net/q1056843325/article/details/60607402 ...
javascript包管理工具发展历史
npm和yarn都是javascript包管理工具:因为npm在使用过程中暴露出一些问题:但恰恰yarn下载依赖包和包版本管理等方面比较有优势:所以其中yarn快速发展:但是npm后续也在不断完善,所 ...
深入浅出 JavaScript 内存管理，垃圾回收
简介本篇文章讲解JavaScript 中垃圾回收机制,内存泄漏,结合一些常遇到的例子,相信各位看完后,会对JS 中垃圾回收机制有个深入的了解. 我的github,欢迎 star 内存生命周期首先, ...
JavaScript内存管理——优化内存占用
使用具备垃圾收集机制的语言编写程序,开发人员一般不必操心内存管理的问题.但是,JavaScript在进行内存管理及垃圾收集时面临的问题还是有点与众不同.其中最主要的一个问题,就是分配给Web浏览器的可 ...
JavaScript内存管理
JavaScript内存机制底层语言,如C,有底层内存管理函数malloc()和free():JavaScript创建的对象不再使用的时候将会自动释放的过程称为垃圾回收,这种回收机制带来了一些问题: ...
三分钟快速理解javascript内存管理
javascript中具有垃圾自动回收机制(Garbage Collection),也就是执行环境会负责管理代码执行过程中使用的内存,在开发过程中就可以不考虑内存的分配,以及无用内存释放的问题.但是触 ...
web前端期末大作业基于HTML+CSS+JavaScript角色管理(带增删改查功能)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 学生管理系统网页设计 | OA管理系统 | 后台管理模板 | ...
JavaScript内存管理机制以及四种常见的内存泄漏解析
转自:http://geek.csdn.net/news/detail/238898 原文:How JavaScript works: memory management + how to handl ...

JavaScript历史状态管理

（1）新URL必须和当前URL在同一个源下;否则，pushState() 将丢出异常。

JavaScript历史状态管理相关推荐

最新文章

热门文章