Location对象常用属性

Location对象

最近做项目时，由于自己没有很好掌握location相关的知识，导致项目出现了生产问题，特此记录总结。

1. location介绍

location是最有用的BOM对象之一，提供了当前窗口中加载文档的信息，以及通常的导航功能。它既是window的属性，也是document的属性。window.location和document.location指向同一个对象。（来源：js高级程序设计）

2. 常用属性

如果当前浏览器加载的URL为： http://www.xixihaha.com:8080/loginPage/?q=helloWorld#home
那么对应的属性取值如下：
hash："#home"，URL散列值，如果没有为空字符串；
host：“www.xixihaha.com:8080”，服务器名及端口号；
hostname：“www.xixihaha.com”，服务器名；
href：“http://www.xixihaha.com:8080/loginPage/?q=helloWorld#home”，加载当前页面的完整URL；
pathname："/loginPage/"，URL中的路径和文件名；
port：“8080”，请求的端口，如果没有则返回空字符串；
protocol：“http:”，页面使用的协议，通常为http:或https；
search："?q=helloWorld"，URL的查询字符串；
origin：“http://www.xixihaha.com”，URL的源地址。只读属性

2.1 获取查询字符串

let getQueryStringArgs = function(){
   //保存数据的对象
   let args = {};
   //取得没有开头问好的查询字符串
   let qs = location.search.substring(1);
   //查询字符串为空,返回空对象
   if (!qs) return args;
   //把每个参数添加到args对象
   for (let item of qs.split('&').map(v => v.split('='))) {
      let key = decodeURIComponent(item[0]),
      val = decodeURIComponent(item[1]);
      if (key.length) {
         args[key] = val;
      }
   }
   return args;
}

2.2 URLSearchParams构造函数

URLSearchParams提供了一组API方法，可以检查和修改查询字符串。

let qs = "?name=hello&psd=123456";
let searchParams = new URLSearchParams(qs);
searchParams.has("name"); // true
searchParams.get("name"); // hello
searchParams.set("flag","true"); //toString()方法打印 name=hello&psd=123456&flag=true
searchParams.delete("psd"); //toString()方法打印 name=hello&flag=true

2.3 操作地址

1.location.assign()

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

2.location.href

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

一般location.href使用最常见。
3.修改其他属性
除了hash之外，只要修改了location的一个属性，就会导致页面重新加载新URL。
4.location.reload()

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

一般把reload()作为最后一行代码，因为位于其之后的代码可能执行也可能不执行，这取决于网络延迟和系统资源等因素。