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历史状态管理的更多相关文章

  1. JavaScript HTML5脚本编程——“历史状态管理”的注意要点

    历史状态管理是现代Web应用开发中的一个难点.在现代Web应用中,用户的每次操作不一定会打开一个全新的页面,因此"后退"和"前进"按钮也就失去了作用,导致用户很 ...

  2. 《前端之路》之 Javascript 模块化管理的来世今生

    目录 第二章 - 04: Javascript 模块化管理的来世今生 一.什么是模块化开发 1-1.模块化第一阶段 1-2.封装到对象 1-3. 对象的优化 二.模块化管理的发展历程 2-1.Comm ...

  3. JavaScript包管理器综述

    JavaScript包管理器综述 作者:chszs,未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 对于JavaScript来说.包管理器 ...

  4. javaScript 内存管理机制

    大家好,今天分享的主题为 JavaScript 内存管理机制,本次分享将从以下三部分进行讲述: js 内存管理与 js 垃圾 常见的 GC 算法 V8 引擎的垃圾回收 js 内存管理与 js 垃圾 关 ...

  5. JavaScript 事件管理

    在设计JavaScript xxsdk的时候考虑到能让调用者参与到工作流程中来,开始用了回调函数.如下: this.foo = function(args,callbackFn) { //do som ...

  6. [原创作品]Javascript内存管理机制

    如果你也喜欢分享,欢迎加入我们:QQ group:164858883 内存策略:堆内存和栈内存栈内存:在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配.当在一段代码块中定义一个 ...

  7. 浅谈javascript性能-管理内存

    上次说到,javascript脚本到底应该放在哪里?用什么用处? 以下2点: 在Html.Body部分中的JS会在页面加载的时候执行.即-用户触发一个事件的时候执行的脚本.eg:onload事件... ...

  8. javascript 内存管理

    1.垃圾回收机制 在编写Javascript程序时,开发人员不用关心内存问题,内存分配及无用内存的回收完全实现了自动化管理.垃圾收集器会按照预定的时间间隔, 周期性的找出那些不再继续使用的变量,然后释 ...

  9. JavaScript内存管理

    低级语言,比如C,有低级的内存管理基元,想malloc(),free().另一方面,JavaScript的内存基元在变量(对象,字符串等等)创建时分配,然后在他们不再被使用时"自动" ...

随机推荐

  1. median(NOIP模拟赛Round 3)

    也是神奇的题目.. 原题传送门 首先看到这道题目,很明显我们需要线性算法 1.前缀和+统计 2.DP+统计 对于第一种算法,我们可以对于任何一个a[i]对b进行比较,如果大于b标上1,等于b标上0,小 ...

  2. SQL Server分页语句ROW_NUMBER，读取第4页数据，每页10条

    SQL Server分页语句ROW_NUMBER,读取第4页数据,每页10条 SELECT Id,[Title],[Content],[Image] FROM ( SELECT ROW_NUMBER( ...

  3. 用RegisterHotKey注册系统热键

    函数功能:该函数定义一个系统范围的热键. 函数原型:BOOL RegisterHotKey(HWND hWnd,int id,UINT fsModifiers,UINT vk): 参数: hWnd:接 ...

  4. 新疆大学ACM-ICPC程序设计竞赛五月月赛（同步赛）F 猴子排序的期望【Java/高精度/组合数学+概率论】

    链接:https://www.nowcoder.com/acm/contest/116/F 来源:牛客网 题目描述 我们知道有一种神奇的排序方法叫做猴子排序,就是把待排序的数字写在卡片上,然后让猴子把 ...

  5. 动态规划-最长上升子序列（LIS模板）多解+变形

    问题描述 一个数的序列bi,当b1 < b2 < ... < bS的时候,我们称这个序列是上升的.对于给定的一个序列(a1, a2, ..., aN),我们可以得到一些上升的子序列( ...

  6. Python的程序结构[2] -> 类/Class[2] -> 方法解析顺序 MRO

    方法解析顺序 / MRO (Method Resolution Order) 关于方法解析顺序(MRO)的详细内容可以参考文末链接,这里主要对 MRO 进行简要的总结说明以及一些练习示例. 经典类和新 ...

  7. Python的网络编程[4] -> DHCP 协议[1] -> DHCP 的 Python 实现

    DHCP实现 / DHCP Implement 目录 DHCP 服务器建立过程 DHCP 报文加码实现过程 下面介绍建立一个简单的DHCP服务器,主要用于对基本的DHCP请求进行响应,目前只提供一个I ...

  8. 细说JavaScript对象(2)：原型对象

    JavaScript 并没有类继承模型,而是使用原型对象 prototype 进行原型式继承. 尽管人们经常将此看做是 JavaScript 的一个缺点,然而事实上,原型式继承比传统的类继承模型要更加 ...

  9. MySQL索引，MySQL性能分析及explain的使用，分析SQL查询性能

    可以使用explain来分析MySQL查询性能,举例如下: 1.使用explain语句去查看分析结果 如 explain select * from test1 where id=1; 会出现: id ...

  10. strace 使用案例

    http://www.cnblogs.com/lixigang/articles/5512527.html