url问题

本文主要总结关于JavaScript的url相关问题。

url编码

编码方式主要有两种：

• encodeURI()，对应的解码方法为decodeURI()
• encodeURIComponent()，对应的解码方法为decodeURIComponent()

两者的区别：

• encodeURI()方法主要用于对整个URL进行编码。除了常见符号外，它对网址中的特殊符号，如“;/?:@&=+$,#”等，不进行编码
• encodeURIComponent()方法主要是对url的个别部分进行编码。它对于网址中的特殊符号也会编码。

因此若要对整个url进行编码，使用encodeURI()方法；若要对url部分内容编码，使用encodeURIComponent()方法。

location对象

location对象中保存着当前文档的信息。我们可以通过它查看当前url。

特殊性

location对象既是window对象的属性，也是document对象的属性。并且window.location === document.location

属性

• hash，返回url中的hash值，包括“#”；若没有返回空
• host，返回服务器名称和端口号
• hostname，返回服务器名称
• href，完整url；同时也等于location.toString()
• pathname，目录和文件名
• port，端口号
• protocol，协议。（http:或https:）
• search，查询字符串，包括“？”

查询字符串

将查询字符串转变为对象的函数。

function getQueryStringArgs() {
    // 获取查询字符串并去掉问号
    let qs = ( location.search.length > 0 ? location.search.slice(1) : ""),
        // 保存的数据对象
        args = {},
        items = qs.length ? qs.split("&") : [];

    for(let i = 0; i < items.length; i++){
       let item = items[i].split("="),
           name = decodeURIComponent(item[0]),
           value = decodeURIComponent(item[1]);
       if (name.length){
           args[name] = value;
       }
    }
    return args;
}

改变浏览器位置

• assign(url)方法

  • 会立即打开url，并在浏览器历史记录里生成新纪录。
  • 相当于window.location = url;
  • 相当于location.href = url;（最常用）

• 修改location的其他属性（hash除外），页面都会重新加载。

  • 修改hash值虽然不会重新加载页面，但会生成新的历史记录，用户可通过后退按钮导航到前一个页面

• replace(url)

  • 会立即导航到新页面，但不会生成历史记录；用户无法后退到前一个页面

• reload()

• 重新加载页面
• 无参数，则以最有效的方式加载。即可能会从缓存中加载
• 可设置参数为true,这样会强制从服务器下载

history对象

• 保存着用户上网的历史记录

• go()方法实现在历史记录中跳转

  • go(-1)，后退一页
  • go(1)，前进一页
  • go(“happy.com”)，跳转到历史记录中包含该字符串的第一个位置

• back()方法，后退一页，

• forward()方法，前进一页
• length属性，保存历史记录的数量。
  
  • 用于检测当前页面是否是用户历史记录中的第一个页面