这份 window.location 备忘单，让你更有条理解决地址路径问题！

window.location 属性

window.location 返回值
.origin 站点主地址(协议 + 主机名 + 端口)
.protocol 协议架构 (http: 或者 htts:)
.host 域名 + 端口
.port 端口
.pathname 最前页的 ‘/‘ 后面跟的路径
.search ? 后跟的查询字符串
.hash 从 # 号开始的部分
.href 完整网址 
  1. window.location.origin    → '"https://shixiseng.com'
  2.                .protocol  → 'https:'
  3.                .host      → 'shixiseng.com'
  4.                .hostname  → 'shixiseng.com'
  5.                .port      → ''
  6.                .pathname  → '/search'
  7.                .search    → '?q=1111'
  8.                .hash      → '#1111'
  9.                .href      → 'https://shixiseng.com/tc?q=1111#1111'

host 和 hostname 的区别

  1. window.location.host; // 'shixiseng.com:8844'
  2. window.location.hostname; // 'shixiseng.com'
  3. window.location.port; // '8844'

host将包括端口号，而hostname将仅返回主机名。

window.location 方法

.assign() 加载一个新的文档
.replace() 用新的文档替换当前文档
.reload() 重新加载当前页面

replace vs assign vs href

assign 是将当前页面保存在历史记录中，因此用户可以使用“后退”按钮导航到该页面。 而使用replace方法时，不会保存它，三个可以重定向，区别在于浏览器的历史记录。 href和assign 会把当前页面保存在历史记录中，而replace则不会。 因此，如果你想创建一种导航无法回到原始页面的体验，请使用replace。