解锁 BOM 的 Location 对象的技能

 location，BOM 最常用的对象之一，提供了当前窗口加载的文档信息和一些导航功能。

location，一个特殊的对象，它既是 window 对象的属性，也是 document 对象的属性，换句话说 document.location 和 window.location 引用的是同一个对象

location的常用属性

• hast：返回URL中 #号后面跟着的0个或多个字符，没有则返回空字符串
• host：返回服务器名称和端口号（如果有端口号）
• hostname：返回服务器名称
• href：返回完整的 URL 地址，location 对象的 toString() 方法也返回这个值
• pathname：返回 URL 目录或文件名称
• port：返回端口号，没有则返回空字符串
• protocal：返回服务器协议，通常是 http 和 https
• search：返回 URL 中 ？号开头的查询字符串

在控制台打印出 location 可以看到如下信息：location 等同于 window.locaion

获取URL查询字符串

虽然 location 的 search 可以获取到 URL 包含的查询字符串，但是并不能逐个取得每项的查询字符串，下面我们封装一个小方法，以便我们获取所有参数的一个对象

function getSearch(urlStr){
    //把传入的字符串去掉？号开头和解析成数组
    let qa = urlStr.substring(1).split("&");
    //保存数据的对象
    let objQa = {};
    
    for(let i=0; i < qa.length; i++){
        let item = qa[i].split("=");
        //定义2个接受值的变量
        let name,num;
        name = item[0];
        num = item[1];
        objQa[name] = num;
    }
    return objQa;
}
getSearch(location.search)
//{rapidView: "257", projectKey: "MAP", view: "planning", selectedIssue: "MAP-680"}

修改URL

location，中有很多修改方式修改浏览器的 URL。

• location.assign("https://www.baidu.com")
• location = "https://www.baidu.com" /window.location 同等
• location.href = "https://www.baidu.com"

另外，修改location的其他属性，也可以改变当前加载页面的URL（除hash外）

location.search = "?js=javascript" 

......

 上面说到的每一种方式在修改 URL 之后，都会在浏览器历史记录中留下痕迹，用户可以点击后退按钮，回退到前一个页面

location.replace() ，该方法接收一个要跳转到URL参数，用该方法修改的URL，不会在浏览器的历史记录存在，因此用户也无法回到前一个页面

location.reload()，重新加载页面，从缓存加载

location.reload(true)，重新加载页面，从服务器加载