location 和 history

Location 对象：封装了浏览器地址栏的 URL 信息

一、hash

返回 URL 中 hash(#后跟零个或者多个字符), 如果不包含, 返回空字符串
# 位置标识符 : 当前页面的位置信息, 比如: 跳转顶部

console.log(location.hash); // ""

二、host : 返回服务器名称和端口号

console.log(location.host); // "localhost:63342"

三、hostname : 返回不带端口号的服务器名称

console.log(location.hostname); // localhost

四、href: 返回当前价在页面的完整 URL

console.log(location.href); // http://localhost:63342/htmlcss/22_javascript%E5%9F%BA%E7%A1%80/day_12_ES6/03_BOM%E6%93%8D%E4%BD%9C/02_location%E5%AF%B9%E8%B1%A1.html?_ijt=hiop2dovhunhqnn2udlbo9ncbu

location.href = 'www.baidu.com'; // 跳转到其他页面

如果直接将 location.href 属性修改为一个绝对路径（或相对路径），则页面会自动跳转到该路径，并生成相应的历史记录。

五、pathname : 返回 URL 中的 目录 和 文件名

console.log(location.pathname); // /htmlcss/22_javascript%E5%9F%BA%E7%A1%80/day_12_ES6/03_BOM%E6%93%8D%E4%BD%9C/02_location%E5%AF%B9%E8%B1%A1.htmlAndCss

六、port : 返回 URL 中执行的端口号

如果 URL 中不包含端口号, 则返回空字符串

console.log(location.port); // 63342

七、protocol : 返回页面使用的协议, 通常指的是 http / https

console.log(location.protocol); // http:

八、search : 返回 URL 的查询字符串, 这个字符串以 ? 开头

console.log(location.search); // ?_ijt=hiop2dovhunhqnn2udlbo9ncbu

Location 对象的方法

一、location.reload() – 刷新页面

location.reload(); // 重新加载当前页面location.reload(true); // 在方法中传递一个 true，则会强制清空缓存刷新页面

二、location.assign(str) – 跳转页面

location.assign('www.baidu.com'); // 作用和直接修改 location.href 一样。

三、location.replcace() – 替换当前页面

location.replace('http://www.baidu.com');

使用一个新的页面替换当前的页面，调用完毕也会跳转页面。但不会生成历史纪录，不能使用（后退按钮）后退。

四、encodeURI('') – 中文 - URI编码

console.log('恰饭'); // %E6%81%B0%E9%A5%AD

五、decodeURI('') – URI编码 - 中文

console.log('%E6%81%B0%E9%A5%AD'); // 恰饭

History 对象

history 对象：可以用来操作浏览器的向前或向后翻页。

history.length;

获取浏览器历史列表中的 url 数量。注意，只是统计当次的数量，如果浏览器关了，数量会重置为 1

history.back(); – 用来回退到上一个页面，作用和浏览器的[回退按钮]一样。
history.forward(); – 用来跳转下一个页面，作用和浏览器的[前进按钮]一样。
history.go(); – 向前 / 向后跳转 n 个页面。

history.go(1); // 向前跳转一个页面，相当于 history.forword()
history.go(2); // 向前跳转两个页面
history.go(0); // 刷新当前页面
history.go(-1); // 向后跳转一个页面，相当于 history.back()
history.go(-2); // 向后跳两个页面