location 简介

日常开发中经常忘记，不能够非常准确编码。因而写博客记录：

资料：
https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

window.location 简介

打开浏览器输入：https://juejin.im/foo/bar?name=Jay&age=12#ba
以下是获取的各自对应值：

// hash 返回URL 中的# 号后的多个字符，如果URL 中不包含散列，则返回空字符串
location.hash
// host 返回服务器名称+ 端口
location.host
// hostname 返回不带端口号的服务器名称
location.hostname
// href 返回当前加载页面的完整URL
location.href
location.toString() == location.href
// pathname 返回URL 中的目录+ 文件名
location.pathname
// port 返回端口号
location.port
// protocol 返回协议
location.protocol
// search 返回URL 中的查询字符串，这个字符串以问号开头
location.search
// origin 返回URL 协议+ 服务名称+ 端口号 (不兼容IE8)
location.origin
location.origin == location.protocol + '//' + location.host

事件

1. hash 模式

通过代码location.hash='/xxx' 改变当前页面的hash 值，不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。但是会触发hashchange事件。

window.addEventListener('hashchange', () => { // })

2. history 模式

在history 中跳转： back(), forward()和 go() 方法来完成在用户历史记录中向后和向前的跳转。

// 这和用户点击浏览器回退按钮的效果相同。
window.history.back();
// 你可以向前跳转
window.history.forward();
// 向后移动一个页面 (等同于调用 back()):
window.history.go(-1);
// 向前移动一个页面, 等同于调用了 forward():
window.history.go(1);
// 类似地，你可以传递参数值2并向前移动2个页面，等等。

添加和修改历史记录中的条目:
HTML5引入了 history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。

这些方法通常与window.onpopstate 配合使用。

使用 history.pushState() 可以改变referrer，它在用户发送 XMLHttpRequest 请求时在HTTP头部使用，改变state后创建的 XMLHttpRequest 对象的referrer都会被改变。因为referrer是标识创建 XMLHttpRequest 对象时 this 所代表的window对象中document的URL。

pushState/replaceState/popstate 示例：

window.addEventListener('popstate', (event) => {console.log('popstate called.', event.state)})

let stateObj = {
    foo: "bar",
};
history.pushState(stateObj, "page 2", "bar.html");

浏览器地址由https://juejin.im/foo/bar?name=Jay&age=12#ba变为https://juejin.im/foo/bar.html
但并不会导致浏览器加载 bar.html ，甚至不会检查bar.html 是否存在。同样也不会触发popstate事件。此时，history.state的值为{ foo: 'bar' }。

详细见https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

至此，结束。