封装一个方法
我们熟知 url中的参数是以这种形式展示的
?id=123&name=tom&age=13…
第一种:基础用法 用字符串分割
所以。来吧展示
function getParams(key) {
var result = {} // 定义一个全局的对象
var str = window.location.search;
if(str.startsWith('?')) { // 判断str以?开头的
var strParams = str.split('?')[1];
var arrParams = strParams.split('&');
//然后进行for循环,这里直接用了forEach
arrParams.forEach((item) => {
var temKey = item.split('=')[0];
var temVal = item.split('=')[1];
result[temKey] = temVal
})
}
return result[key]
}
或者
getUrlParameter: function(field) {
//获取Url 参数
var GET = {};
var canshu=window.location.hash.split("?")[1]==undefined?'':window.location.hash.split("?")[1];
if(canshu!=''){
var strarr = canshu.split("&");
for(i=0;i<strarr.length;i++){
var xx = strarr[i];
var mykey = xx.split('=')[0];
var myvalue = xx.split('=')[1];
GET[mykey] = myvalue;
}
}
return GET[field];
}
第二种:URLSearchParams
这个方法是JS的内置对象,可以映射出来search查询条件
使用get方法,可以获取指定的参数
function get ParamsNew(key) {
var temData = new URLSearchParams(window.location.search);
return temData.get(key)
}
结束
拓展
当我们进行数据修改的时候,假设我们要获取ID去展示
var id = getParamsNew('id');
if(id){
// 有id的时候就要加载数据
loadData(); // 把需要修改的数据填充在表单里面
};
// 方法
function loadData() {
var strPeople = localStorage.getItem('myStudent'); // 我们从localStorage中取值
var people = [];
if(strPerple) {
people= JSON.parse(strPeople);
}
// 如果箭头函数只有一行的话,可以不写return
// 我们利用数组中的find方法,查找复核条件的数据
var person = people.find((item) =>{
item.id == id // 查找符合条件的项
})
// 进行赋值操作
XXname.value = person.name;
XXage.value = person.age;
.....// 这样就赋值成功了
}
这样就可以进行编辑展示,但是要注意是否是新增和修改在一块的,如果在一块就要在保存的时候加判断条件了
可以看这个文章https://blog.csdn.net/lzfengquan/article/details/118605300?spm=1001.2014.3001.5501