一个处理location.search的小方法

最近在写公司的一个类似 AJAX 搜索页面的时候,在点击搜索的时候,会跳转到对应的页面,当返回,也就是点击浏览器的返回按钮时,还显示之前的页面,也就是要保存搜索的关键词,在不使用 cookie 和 localstorage 的情况下,可以用 location.search 来存储

由于 location 是 window 下的,所以获取 location.search 可以直接获取,这个值的第一个字符是 '?' ,里面的 key-value 是用 key=value 来表示, key-value 与 key-value 之间用’&’隔开,所以我们去掉第一个字符 '?' 并用 '&' 分割这个值,得到元素是字符串形式的 key=value 的数组

var query = location.search.substring(1).split('&');

循环处理分割后得到的数组,每个元素理论上应该是形如 key=value 的字符串,我们再把每个元素用 '=' 分隔开,第一个元素是 key ,第二个元素是 value ,我们可以得到一个包含所有 key=value 的对象,暂且称之为 parms 对象

for (var i = 0; i < query.length; i++) {
  var pos = query[i].split('=');
  if (pos[0]) {
    parms[pos[0]] = pos[1] ? pos[1] : '';
  }
}

接下来处理传进来的参数,如果没有则直接返回上一步得到的 parms 对象

if (!args) {
  return parms;
}

如果参数存在,则枚举这个对象,如果这个对象的属性在上一步得到的 parms 对象中存在,则更新该属性,否则添加该属性并赋值

for (var argKey in args) {
  for (var parmskey in parms) {
    if (argKey === parmskey) {
      parms[parmskey] = args[parmskey];
      break;
    }
  }
  parms[argKey] = args[argKey];
}

到这一步,我们已经得到了新的 parms 对象,我们要把它还原成 location.search 的形式

for (var key in parms) {
  newParms += key + '=' + parms[key] + '&';
}

然后把最后一个 '&' 去掉

newParms.substring(0, newParms.length - 1)

到这一步才算完成整个过程,下面贴上完整代码,也可以在 Github 上查看

function setParms(args) {
  var parms = {}, newParms = '?';
  //把location.search解析成对象parms
  var query = location.search.substring(1).split('&');
  for (var i = 0; i < query.length; i++) {
    var pos = query[i].split('=');
    if (pos[0]) {
      parms[pos[0]] = pos[1] ? pos[1] : '';
    }
  }
  //如果没有传设置的args,则直接返回parms
  if (!args) {
    return parms;
  }
  //设置parms,属性存在则更新,不存在则添加
  for (var argKey in args) {
    for (var parmskey in parms) {
      if (argKey === parmskey) {
        parms[parmskey] = args[parmskey];
        break;
      }
    }
    parms[argKey] = args[argKey];
  }
  //字符串化parms并返回
  for (var key in parms) {
    newParms += key + '=' + parms[key] + '&';
  }
  return newParms.substring(0, newParms.length - 1);
}