location 对象

location 对象

location 提供了当前窗口中加载文档的信息，以及通常的导航功能。既是 window 的属性，也是 document 的属性。可以用 window.location 和 document.location 使用。

假设 URL ：http://xkcuser:xkcpassword@www.xkc.com:80/xkc/?name=xkc#xkc

location 对应 URL 的属性内容如下：

属性	值	说明
location.hash	“#xkc”	URL散列值（#后面的字符)，没有则为空
location.host	“www.xkc.com.80”	服务器名以及端口号
location.hostname	“www.xkc.com”	服务器名
location.href	“http://www.xkc.com:80/xkc/?name=xkc#xkc”	加载页面完整的 URL 。location 的 toString() 方法也返回这个值
location.pathame	“/xkc/”	URL 中的路径和（或者）文件名
location.port	“80”	请求的端口
location.protocol	“http:”	协议。通常是"http:" 或 “https:”
location.search	“?name=xkc”	URL 的查询字符串。以 ? 开头
location.username	“xkcuser”	域名前指定的用户名
location.password	“xkcpassword”	域名前指定的密码
location.origin	“http://www.xkc.com”	URL 的源地址。只读

查询字符串

由于 location.search 查询到的是 “?[key]=[value]&[key]=[value]” 这样的字符串。要获得对应的键值对，需要进行查询。

let getQueryStringArgs = function () {
  let qs = location.search ? location.search.substring(1) : "",
    args = {};
  for (let item of qs.split("&").map((k) => k.split("="))) {
    let name = decodeURIComponent(item[0]),
      value = decodeURIComponent(item[1]);
    if (name.length) {
      args[name] = value;
    }
  }
  return args;
};

URLSearchParams ，可以对查询字符串进行操作。

let qs = "?name=xkc&age=20";
let searchParams = new URLSearchParams(qs);
console.log(searchParams); // URLSearchParams { 'name' => 'xkc', 'age' => '20' }
let hasName = searchParams.has("name");
console.log(hasName); // true
let name = searchParams.get("name");
console.log(name); // xkc
searchParams.set("hobby", "LOL");
console.log(searchParams.toString()); // name=xkc&age=20&hobby=LOL
searchParams.delete("hobby");
console.log(searchParams.toString()); // name=xkc&age=20
// 遍历
for (let param of searchParams) {
  console.log(param);
}
/*
[ 'name', 'xkc' ]
[ 'age', '20' ]
*/

操作地址

修改浏览器地址可以通过，location.assign() ，传入 URL 为参数。

location.assign("https://www.baidu.com");

同样也有另外两种改变地址的方式：

window.location = "https://www.baidu.com";
location.href = "https://www.baidu.com";

这几种方法都会在浏览器历史记录中增加对应记录，因此可以通过浏览器的"前进"和"后退"。而另一种方式则是替换地址。

location.replace("https://www.baidu.com");

reload() ，能够重新加载当前显示的页面。

location.reload(); // 重新加载，可能是从缓存中加载
location.reload(true); // 重新加载，从服务器中加载