BOM location

概述
在JavaScript中，window.location对象用于获取当前页面地址信息，也可以用来重新定向到新页面。该对象可以不带前缀window，简写为location。
1.location的常用属性
location对象常用的属性有location、hostname、pathname、protocol、port，方法有assign()等。
属性 描述
location 用于获取当前页面地址信息，
也可以重定向到新页面
href 返回完整的URL
protocol 返回当前页面的web协议
host 返回URL的主机名和端口号
hostname 返回当前页面的主机名
port 返回当前页面的端口号
pathname 返回当前页面所在路径
search 返回URL的问号及参数部分
hash 返回URL中的锚点（#后面的部分） 
	
//进入该页面的地址如下：
//bom_location.html?username=csh&num=123456#print
console.info("window.location:"+window.location);
console.info("location.href:"+location.href);
console.info("location.protocol:"+location.protocol);
console.info("location.host:"+location.host);
console.info("location.hostname:"+location.hostname);
console.info("location.port:"+location.port);
console.info("location.pathname:"+location.pathname);	
console.info("location.search:"+location.search);
console.info("location.hash:"+location.hash);
		

	
<button onclick="window.location='location_test.html'">location按键</button>
2.location的常用方法
Window Location对象还提供了一些方法，用于导航到其他网页或重新加载当前网页。
方法 描述
assign(url) 加载指定的URL
reload() 重新加载当前网页
replace(url) 用指定的URL替换当前网页


注意replace按键是把当前页面替换了，所以跳转之后在历史返回会直接回到上层，而不是回到本页 
	
<button onclick="location.assign('location_test.html')">assign()按键</button>
<button onclick="location.reload()">reload()按键</button>
<button onclick="location.replace('location_test.html')">replace()按键</button>
3.url参数获取&修改
location中的search属性就是连接中的?加参数部分，比如：http://xxx/bom_location.html?username=csh&num=123456#print 中“?username=csh&num=123456”部分
获取URL参数 Window Location对象的search属性包含URL中的查询字符串部分。查询字符串通常包含用于向服务器发送附加信息的参数。 修改URL参数 可以使用Window Location对象的search属性来修改URL中的查询字符串部分。
	
//获取url参数，paramName是要获取的参数名称，函数返回该参数的值
function getQueryParam(paramName) {
  const queryString = window.location.search;
  const searchParams = new URLSearchParams(queryString);
  return searchParams.get(paramName);
}
console.log(getQueryParam('username'));
console.log(getQueryParam('num'));

//修改url参数，paramName是要修改的参数名称，paramValue要改成的值
function updateQueryParam(paramName, paramValue) {
  const searchParams = new URLSearchParams(window.location.search);
  searchParams.set(paramName, paramValue);
  const newUrl = window.location.pathname + '?' + searchParams.toString();
  window.location.href = newUrl;
}
//例如把get参数中的username从csh改成abc
updateQueryParam('username',"abc");
//在编辑器内置浏览器中运行会一直刷新，没实装
4.url参数保存成对象
注意有#号会导致识别错误，因为没有对#进行处理 参考链接
获取URL参数 比如：http://xxx/bom_location.html?username=csh&num=123456 输出为：{username:'csh';num:'123456'} 获取get参数之前的地址 比如：http://xxx/bom_location.html?username=csh&num=123456 输出为：http://xxx/bom_location.html 
	
//获取get参数===============
let params = {};
let queryString = url.split('?')[1]; // 获取?后面的字符串

if (queryString) {
	let pairs = queryString.split('&'); // 将字符串按&分隔成键值对数组
	for (let i = 0; i < pairs.length; i++) {
		let pair = pairs[i].split('='); // 将键值对按=分隔
		let key = decodeURIComponent(pair[0]); // 解码键
		let value = decodeURIComponent(pair[1]); // 解码值
		params[key] = value; // 存储键值对
  }
}
console.log(params); // 输出参数之前的地址

//获取get参数之前的地址=========
function getBaseURLWithRegex() {
	const urlRegex = /^([^?#]+)/;
	return urlRegex.exec(window.location.href)[1];
}
const baseURL = getBaseURLWithRegex(); // 使用正则表达式
console.log(baseURL); // 输出参数之前的地址

//这个也可以，但是对带#的不好使
console.log(url.split('?')[0]);