浏览器中的JS-History-浏览历史管理-pushState()

这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战

前言

前文学习了关于浏览器中的 JS 之浏览历史-history以及其使用管理方式之一hashchange, 本文继续来学习浏览器中的 JS - 浏览历史记录的管理 API - pushState()

其实好多让我们方便省心使用的库/框架底层都是 JS 基础的封装, 比如各种路由的封装.通过前几篇文章我们学习记录了浏览器中的 JavaScript, 更多更文-各知识点小结-list:

浏览器 浏览历史管理方法二-pushState()

pushState() 这个方法在我们学习 VueRouter 源码时会遇到...

pushState

前面学习的第一种理解起来相对简单, 这里第二种处理浏览器历史记录的方案是 pushState()

pushState -- History API :

在 HTML 文档中, history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。

使用语法

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

参数解析:

• state: 状态对象用 JS对象表示, 可以是任何可以序列化的对象

state 与 pushState() 创建的新历史记录条目相关联。 每当用户导航到新状态时, 都会触发popstate 事件, 并且该事件的状态属性包含历史记录条目的状态对象的副本。

注意: 存储大小限制! 如果将序列化表示形式大于此状态的状态对象传递给pushState(), 则该方法将引发异常。 如果需要更多空间, 建议使用 上文学过的 sessionStorage或者localStorage。

• title 可忽略

可忽略此参数, 或者 可以为要移动的状态传递简短的标题

• url 可选

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

注意: 浏览器不会在调用 pushState() 之后尝试加载此URL, 但可能会稍后尝试加载URL, 例如在用户重新启动浏览器之后。

pushState() 方法使用示例

// 通过设置state, title和url创建一条新的历史记录。

const state = { 'page_id': 21, 'user_id': 621 }
const title = 'hello-world-iwin621'
const url = 'hello-world.html'

history.pushState(state, title, url)

相关更文阅读

1. JavaScript 学习理解-Number-这是一个函数

2. JS 学习理解-自动类型转换

3. JavaScript 中的中缀运算符

4. 你知道 JavaScript 的 typeof 是什么吗?

5. 学习 JavaScript 中几个代表性事件(Event)

6. 学习理解客户端 JavaScript-事件分类(一)

7. 理解浏览器中的 JavaScript-事件注册

8. 浏览器中的 JavaScript-fetch()网络请求方法

• 浏览器中的 js-通过 fetch()上传文件

• 浏览器-通过 fetch 学习指定请求方法和请求体

1. HTTP 响应代码
2. 浏览器中的 JS-WebSocket 通信(一)
3. 学习浏览器中的 JS-WebSocket 发送接收消息(二)
4. 学习浏览器中的 JS-存储的分类(一)
5. 浏览器中的 JS-history
6. JS-history-hashchange

Calm Down & Carry On!

Buy Less by Know More!

学习, 是一个漫长的痛苦过程! 也就是这个不断经历痛苦的锤炼, 让我们更加强大!

在掘金养成学习总结习惯, 记录, 积累, 加油!

参考内容

• 浏览器中的 JavaScript-history | MDN

• 浏览器中的JS-History/pushState