JavaScript(下文简称js)是一种脚本语言，可以在浏览器端或者服务器端使用。在前端开发中，js是不可或缺的一部分。其中之一的应用就是获取网页参数。本文将简要介绍js获取网页参数的方法，并分序号详细阐述各种方法的使用。
2. 通过url获取参数（location.search）
获取网页参数最简单的方法就是通过url中的查询字符串(location.search)。查询字符串是指问号(?)以及问号后的字符串。比如以下url：
/?name=Michael&age=25
其中查询字符串为：?name=Michael&age=25
js可以通过以下代码获取查询字符串：
```
let search = location.search;
```
获取到的查询字符串search将包含问号。如果想将其转换为对象，可以使用以下代码：
```
function getQueryStringObj(search) {
let obj = {};
let str = search.substr(1);
let arr = str.split(\"&\");
for(let i=0; i
let pair = arr[i].split(\"=\");
obj[pair[0]] = pair[1];
}
return obj;
}
let searchObj = getQueryStringObj(search);
```
上述代码将查询字符串转换为对象并返回。例如，如果查询字符串为?name=Michael&age=25，返回的对象为:
```
{
name: \"Michael\",
age: \"25\"
}
```
3. 通过hash获取参数（location.hash）
另一个获取网页参数的方法是使用url中的#号及其后面的字符串(location.hash)。这种方式适用于前端路由。
例如，以下url:
/#/user/profile?id=123
其中#号后面的字符串为：/user/profile?id=123
js可以通过以下代码获取hash：
```
let hash = location.hash;
```
获取到的hash将包含#号。如果想将其转换为对象，可以使用以下代码：
```
function getHashObj(hash) {
let obj = {};
let str = hash.substr(2);
let arr = str.split(\"&\");
for(let i=0; i
let pair = arr[i].split(\"=\");
obj[pair[0]] = pair[1];
}
return obj;
}
let hashObj = getHashObj(hash);
```
上述代码将获取到的hash转换为对象并返回。例如，如果hash为#/user/profile?id=123，返回的对象为:
```
{
id: \"123\"
}
```
4. 通过cookie获取参数
如果在网页中设置了cookie，js可以通过document.cookie获取cookie值。cookie是一种小型数据，存储在客户端计算机上，以帮助客户端记住某些信息，并且可以在客户端与服务器之间交换信息。
例如，以下cookie：
name=Michael; age=25; gender=male;
js可以通过以下代码获取cookie：
```
let cookie = document.cookie;
```
获取到的cookie将包含所有cookie，以字符串形式存储。如果想将其转换为对象，可以使用以下代码：
```
function getCookieObj(cookie) {
let obj = {};
let arr = cookie.split(\"; \");
for(let i=0; i
let pair = arr[i].split(\"=\");
obj[pair[0]] = pair[1];
}
return obj;
}
let cookieObj = getCookieObj(cookie);
```
上述代码将获取到的cookie转换为对象并返回。例如，如果cookie为name=Michael; age=25; gender=male;，返回的对象为:
```
{
name: \"Michael\",
age: \"25\",
gender: \"male\"
}
```
5. 通过localStorage获取参数
localStorage是浏览器提供的一种本地存储方式。在同一个域名下，localStorage可以存储大量的数据，并且可以在不同的页面间共享。localStorage中存储的数据在关闭浏览器后依然存在。
js可以通过localStorage.getItem方法获取localStorage中的值。例如：
```
let name = localStorage.getItem(\"name\");
```
如果localStorage中存在name这个key，则返回对应的值；否则返回null。
6. 通过sessionStorage获取参数
sessionStorage是浏览器提供的一种本地存储方式。与localStorage相比，sessionStorage的生命周期要短得多。在同一个窗口或标签页下，sessionStorage可以存储大量的数据，并且可以在不同的页面间共享。但在关闭窗口或标签页后，sessionStorage中的数据将被清除。
js可以通过sessionStorage.getItem方法获取sessionStorage中的值。例如：
```
let name = sessionStorage.getItem(\"name\");
```
如果sessionStorage中存在name这个key，则返回对应的值；否则返回null。
7. 通过表单获取参数
在网页中，经常会出现表单，用户可以通过表单来输入一些数据并提交到后台。js可以通过表单元素的value属性获取输入框中的值。
例如，在以下表单中：
```
```
可以通过以下代码获取输入框中的值：
```
let name = document.getElementById(\"nameInput\").value;
```
8. 通过URLSearchParams获取参数
以上方法虽然简单易用，但它们都存在一些缺陷。例如，通过location.search获取查询字符串时，需要手动解析字符串；通过cookie和localStorage获取值时，需要手动解析文本；通过表单获取值时，需要知道表单元素的id或类名。
为了解决这些问题，HTML5引入了一个新的API：URLSearchParams。这个API可以快速、简便地获取查询字符串中的各个键值对。
例如，在以下url中：
/?name=Michael&age=25
可以通过以下代码获取键值对：
```
let params = new URLSearchParams(location.search);
let name = params.get(\"name\");
let age = params.get(\"age\");
```
上述代码通过URLSearchParams获取查询字符串中的键值对，然后可以通过get方法获取对应的值。例如，如果URLSearchParams为name=Michael&age=25，返回的name为Michael，age为25。
9. 总结
js获取网页参数常用有以下几种方法：
1. 通过url获取参数(location.search)
2. 通过hash获取参数(location.hash)
3. 通过cookie获取参数
4. 通过localStorage获取参数
5. 通过sessionStorage获取参数
6. 通过表单获取参数
7. 通过URLSearchParams获取参数
以上方法各有优缺点，可以根据实际情况选择最适用的方法。对于通用型较强的场景，建议选择URLSearchParams获取参数。
1. 什么是网页参数
网页参数，也叫URL参数，是指在网址（URL）上添加的含有信息的内容，用于向服务器发送请求并获取相应的信息。一般来讲，网页参数包含在URL地址里，通常以“?”为起点，后面跟着多个参数，参数之间用“&”符号隔开，每个参数由“参数名”和“参数值”组成。
例如，下面是一个包含参数的URL地址：
/search?keywords=JavaScript&page=1&sortby=price
其中，?后面是第一个参数“keywords=JavaScript”，&后面的是第二个参数“page=1”，第三个参数“sortby=price”。
2. 为什么要获取网页参数
网页参数通常承载了一些关键性的信息，如用户输入的搜索关键字、排序方式等等，这些信息对于服务器端获取和处理数据是至关重要的。在Web开发中，我们经常需要使用这些参数进行调用API或是数据查询等操作。因此，获取网页参数就显得尤为重要。
3. JavaScript获取网页参数的方法
在JavaScript中获取网页参数有多种方法，本文将介绍其中常用的三种。分别是：
1. 通过location.search获取网页参数
2. 通过location.hash获取网页参数
3. 通过正则表达式获取网页参数
接下来，我们将会分别探讨这三种方法的实现方式。
（1）通过location.search获取网页参数
location对象是JavaScript中用于获取当前页面URL的内置对象，其中location.search可以获取到当前URL中的?及其之后的部分，即包含了所有的网页参数。
例如，我们获取“/search?keywords=JavaScript&page=1&sortby=price”这个URL地址中的网页参数，就可以用如下语句：
```
let params = location.search.slice(1);
console.log(params); // 输出：keywords=JavaScript&page=1&sortby=price
```
上述代码中，变量params获得了当前页面URL中的所有参数。
接下来，我们只需对params进行处理，将其解析成一个对象即可。我们可以先用split方法将params字符串按照‘&’符号进行分割，得到一个长度为n的数组。每个数组元素都是一个字符串，代表了一个网页参数。然后，我们可以再使用split方法将“参数名”和“参数值”分开，并存储到一个对象里。
完整代码如下：
```
let params = location.search.slice(1).split(&);
let obj = {};
params.forEach(function(item) {
let arr = item.split(=);
obj[arr[0]] = arr[1];
});
console.log(obj.keywords); // 输出：JavaScript
console.log(obj.page); // 输出：1
console.log(obj.sortby); // 输出：price
```
（2）通过location.hash获取网页参数
与location.search相同，location.hash也是location对象的一个属性，可以用于获取当前URL中的#及其之后的部分。同时，可以通过设置location.hash的值，改变锚点（即#后面的部分），从而实现一些特定的效果。
获取网页参数的方法与通过location.search类似，先获取到当前URL中的所有参数，然后依次对其进行解析。
例如，我们获取地址为“/home#categories=books&price_range=100”的URL中的网页参数，可以用如下语句：
```
let params = location.hash.slice(1);
console.log(params); // 输出：categories=books&price_range=100
```
接下来，我们可以按照location.search的方式进行解析，得到相应的参数对象。
完整代码如下：
```
let params = location.hash.slice(1).split(&);
let obj = {};
params.forEach(function(item) {
let arr = item.split(=);
obj[arr[0]] = arr[1];
});
console.log(obj.categories); // 输出：books
console.log(obj.price_range); // 输出：100
```
（3）通过正则表达式获取网页参数
虽然通过location.search和location.hash获取网页参数的方法简单易行，但当URL上的参数变得越来越多的时候，我们需要进行大量的字符串操作，容易引起代码混乱和出错。而使用正则表达式可以一次性获取到所有的参数，不仅可以大大缩减代码量，还能避免各种字符串操作所引发的问题。
针对URL地址中的参数，我们可以使用JavaScript中的正则表达式进行匹配。下面是一个正则表达式获取网页参数的示例：
```
let query = window.location.search.substring(1);
let vars = query.split(\"&\");
let result = {};
for (let i=0; i let pair = vars[i].split(\"=\"); result[pair[0]] = pair[1]; } console.log(result); // 输出：{keywords: \"JavaScript\", page: \"1\", sortby: \"price\"} ``` 其中window.location.search获取当前URL中的所有参数，query.split(\"&\")使用&符号进行分割，得到每个参数的“参数名”和“参数值”，最后将其存储到一个对象中。 4. 总结 以上就是JavaScript获取网页参数的三种方法。它们分别是通过location.search，location.hash和正则表达式获取网页参数。对于常见的URL地址，我们可以根据实际情况选择其中的任意一种方式。无论哪种形式，获取网页参数都是Web开发中的常见操作之一。
如果觉得《js 获取网页参数 js获取网页参数》对你有帮助，请点赞、收藏，并留下你的观点哦！
