浏览器如何对URL进行管理？

URL 是互联网的基础设施之一。浏览器提供了一些原生对象，用来管理 URL。

1. Location 对象

Location对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法。通过window.location和document.location属性，可以拿到这个对象。

1.1 属性

Location对象提供以下属性。

• Location.href：整个URL。
• Location.protocl：当前URL的协议，包括冒号（:）。
• Location.host：主机，如果端口不是协议默认的80和443，则还会包括冒号（:）和端口。
• Location.hostname：主机名，不包括端口。
• Location.port：端口号。
• Location.pathname：URL路径部分，从根路径/开始。
• Location.search：查询字符串部分，从问号？开始。
• Location.hash：片段字符串部分，从#开始。
• Location.username：域名前面的用户名。
• Location.password：域名前面的密码。
• Location.origin：URL的协议，主机名和端口。

注意：上述属性，只有origin属性是只读的，其他的都可写。

如果对Location.href写入新的URL地址，浏览器会立刻跳转到新地址。

document.location.href = "http://www.baidu.com" //会跳转到百度首页

直接改写Location，相当于写入href属性。

    document.location = "http://www.baidu.com";
    //相当于
    document.location.href = "http://www.baidu.com";

1.2 方法

（1）Location.assign()

assign方法，接受一个URL字符串作为参数，使得浏览器立刻跳转到新的URL。如果参数不是有效的URL字符串，则会报错。

// 跳转到百度首页
document.location.assign("http://www.baidu.com");

（2）Location.replace()

replace方法,接受一个URL字符串作为参数，使得浏览器立刻跳转到新的URL。如果参数不是有效的URL字符串，则会报错。

它与assign方法的差异在于，replace会在浏览器的浏览历史History里面删除当前网址。一旦使用了该方法，后退按钮就无法回到当前网页了，相当于在浏览历史里面，使用新的URL替换了老的URL。

// 跳转到百度首页，并且从history中删除当前网址
document.location.replace("http://www.baidu.com");

（3）Location.reload()

reload方法，使得浏览器重新加载当前网址，相当于按下浏览器的刷新按钮。

它接受一个布尔值作为参数，参数为true，浏览器重新向服务器请求网页，并且重新加载后网页将滚动到头部；如果参数为为false或者为空，浏览器将从本地缓存重新加载该网页，并且重新加载后，网页视口位置将是加载前的位置。

//向服务器重新请求当前网页，并且网页加载后滚动到头部。
document.location.reload(true);
//从本地缓存中重新加载当前网页，并且重新加载后，网页视口位置将是加载前的位置
document.location.reload(false)

（4）Location.toString()

toString方法返回整个URL字符串，相当于读取Location.hrefLocation.href属性。

//当前网页URL为：https://wangdoc.com/javascript/bom/location.html#navbar
document.location.toString(); //https://wangdoc.com/javascript/bom/location.html#navbar
document.location.href; //https://wangdoc.com/javascript/bom/location.html#navbar

2. URL的编码和解码

网页的URL只能包含合法字符，合法字符分两类。

• URL元字符：分号（;），逗号（,），斜杆（/），问号（？），冒号（:），等号（=），加号（+），井号（#）,美元符号（$），@，&。
• 语义字符：a-z，A-Z，0-9，连词号（-），下划线（_），点（.），感叹号（!），波浪线（~），星号（*），单引号（’），圆括号（()）。

除了以上字符，其他字符出现在URL之中都必须转义，规则是根据操作系统的默认编码，将每个字节转为百分号（%）加上两个大写的十六进制字母。


JavaScript提供四个URL的编码/解码方法。

• encodeURI()
• encodeURIComponent()
• decodeURI()
• decodeUITComponent()

2.1 encodeURI()

encodeURI()方法用于转码整个URL。它接受一个字符串作为参数，代表整个URL。会将元字符和语义字符之外的字符，都进行转义。

encodeURI("htttp://www.baidu.com?i=春节"); //将春节转义
//"htttp://www.baidu.com?i=%E6%98%A5%E8%8A%82"

2.2 encodeURIComponent()

encodeURIComponent()方法用于转码URL的组成部分，会转码除了语义字符外的所有字符，即元字符也会被转码。它接受一个参数，就是URL的片段。

encodeURIComponent("春节"); //转义URL组成部分
// "%E6%98%A5%E8%8A%82"

2.3 decodeURI()

decodeURI()方法用于整个URL的解码。是encodeURI()的逆运算。接受一个参数，就是转码后的URL。

decodeURI("htttp://www.baidu.com?i=%E6%98%A5%E8%8A%82") // "htttp://www.baidu.com?i=春节"

2.4 decodeURLComponent()

decodeURIComponent()用于URL 片段的解码。它是encodeURIComponent()方法的逆运算。它接受一个参数，就是转码后的URL片段。

decodeURIComponent("%E6%98%A5%E8%8A%82") // 春节

3. URL接口

URL接口是一个构造函数，浏览器原生提供，可以用来构造、解析和编码 URL。一般情况下，通过window.URL可以拿到这个构造函数。

3.1 构造函数

URL作为一个构造函数，可以生成URL实例。它接受一个表示URL的字符串作为参数。如果参数是不合法的URL，会报错。

var url = new URL("http://www.baidu.com");
url.href // "http://www.baidu.com"

如果参数是另个一个URL实例，构造函数会自动读取该实例的href属性，作为实际参数。

3.2 实例属性

URL实例的属性与Location对象的属性基本一致，返回当前URL的信息。

• URL.href：整个URL。
• URL.protocl：当前URL的协议，包括冒号（:）。
• URL.host：主机，如果端口不是协议默认的80和443，则还会包括冒号（:）和端口。
• URL.hostname：主机名，不包括端口。
• URL.port：端口号。
• URL.pathname：URL路径部分，从根路径/开始。
• URL.search：查询字符串部分，从问号？开始。
• URL.searchParams：返回一个URLSearchParams实例，该属性是Location对象没有的。
• URL.hash：片段字符串部分，从#开始。
• URL.username：域名前面的用户名。
• URL.password：域名前面的密码。
• URL.origin：URL的协议，主机名和端口。

上述属性，只有origin属性是只读的，其他的都可写。

4. URLSearchParams对象

4.1 概述

URLSearchParams对象是浏览器的原生对象，用来构造、解析和处理 URL 的查询字符串（即 URL 问号后面的部分）。
它本身也是一个构造函数，可以生成实例。参数可以为查询字符串，起首的问号?有没有都行，也可以是对应查询字符串的数组或对象。

    // 方法一，传入字符串
    var params = new URLSearchParams("?f=1&a=2");
    // 等同于
    var params = new URLSearchParams(document.location.search);
    
    // 方法二，传入数组
    var params = new URLSearchParams([["f",1],["a",2]]);
    
    // 方法三，传入对象
    var params = new URLSearchParams({"f":1,"a",2});

URLSearchParams会对查询字符串自动编码。

var params = new URLSearchParams({"a":"你好！"});
params.toString(); // "a=%E4%BD%A0%E5%A5%BD%EF%BC%81"

浏览器向服务器发送表单数据时，可以使用URLSearchParams实例作为表单数据。

// 创建URLSearchParams实例
const params = new URLSearchParams({"name":"jidi","age":22});

fetch('https://example.com/api', {
  method: 'POST',
  body: params // 使用URLSearchParams实例作为表单数据发送给服务器
}).then(...)

4.2 URLSearchParams.toString()

toString()方法返回实例的字符串形式。

var url = new URL('https://example.com?foo=1&bar=2');
var params = new URLSearchParams(url.search);

params.toString() // "foo=1&bar=2'

4.3 URLSearchParams.append()

append()方法用来追加一个查询参数。它接受两个参数，第一个为键名，第二个为键值，没有返回值。

var params = new URLSearchParams({'foo': 1 , 'bar': 2});

// 追加一个查询参数
params.append('baz', 3);
params.toString() // "foo=1&bar=2&baz=3"

append()方法不会识别键名是否已经存在。

var params = new URLSearchParams({'foo': 1 , 'bar': 2});

// 追加一个查询参数，键名已存在
params.append('foo', 3);
params.toString() // "foo=1&bar=2&foo=3"

4.4 URLSearchParams.delete()

delete()方法用来删除指定的查询参数。它接受键名作为参数。

var params = new URLSearchParams({'foo': 1 , 'bar': 2});

// 删除一个指定的查询参数
params.delete('bar');
params.toString() // "foo=1"

4.5 URLSearchParams.has()

has()方法返回一个布尔值，表示查询字符串是否包含指定的键名。

var params = new URLSearchParams({'foo': 1 , 'bar': 2});

//是否包含指定键名的查询字符串
params.has('bar') // true
params.has('baz') // false

4.6 URLSearchParams.set()

set()方法用来设置查询字符串的键值。

它接受两个参数，第一个是键名，第二个是键值。如果是已经存在的键，键值会被改写，否则会被追加。

var params = new URLSearchParams('?foo=1');

// 同名的键，键值被改写
params.set('foo', 2);
params.toString() // "foo=2"

// 不存在的键，会追加
params.set('bar', 3);
params.toString() // "foo=2&bar=3"

如果有多个的同名键set()会移除现存所有的键。

var params = new URLSearchParams('?foo=1&foo=2');

// 多个同名键，会移除现存所有的键
params.set('foo', 3);
params.toString() // "foo=3"

4.7 URLSearchParams.get()，URLSearchParams.getAll()

get()方法用来读取查询字符串里面的指定键。它接受键名作为参数。

var params = new URLSearchParams('?foo=1');

// 读取指定键名，返回字符串
params.get('foo') // "1"
// 不存在，返回null
params.get('bar') // null

两个地方需要注意。第一，它返回的是字符串，如果原始值是数值，需要转一下类型；第二，如果指定的键名不存在，返回值是null。

如果有多个的同名键get()返回位置最前面的那个键值。

var params = new URLSearchParams('?foo=3&foo=2&foo=1');

// 有多个同名键，返回最前面的一个
params.get('foo') // "3"

getAll()方法返回一个数组，成员是指定键的所有键值。它接受键名作为参数。

var params = new URLSearchParams('?foo=1&foo=2');
// 返回数组
params.getAll('foo') // ["1", "2"]

4.8 URLSearchParams.keys()，URLSearchParams.values()，URLSearchParams.entries()

这三个方法都返回一个遍历器对象，供for…of循环遍历。它们的区别在于，供keys()方法返回的是键名的遍历器，values()方法返回的是键值的遍历器，entries()返回的是键值对的遍历器。

var params = new URLSearchParams('a=1&b=2');

// 遍历键名
for(var p of params.keys()) {
  console.log(p);
}
// a
// b

// 遍历键值
for(var p of params.values()) {
  console.log(p);
}
// 1
// 2

// 遍历键值对
for(var p of params.entries()) {
  console.log(p);
}
// ["a", "1"]
// ["b", "2"]

如果直接对URLSearchParams进行遍历，其实内部调用的就是entries()接口。

var params = new URLSearchParams('a=1&b=2');

for (var p of params) {}
// 等同于
for (var p of params.entries()) {}