将 UTM 参数附加到我当前的 URL答案

【问题标题】：Appending UTM parameters to my current URL将 UTM 参数附加到我当前的 URL
【发布时间】：2020-10-13 07:47:20
【问题描述】：

我从我的索引页面上的 URL 中获取 utm 参数，并将它们存储在本地存储中，然后我使用下面的脚本从本地存储中获取参数并将它们附加到联系页面 URL 的末尾。

<script>
  var parameters = localStorage.getItem("url");    
  const nextURL = window.location.href + parameters;
  window.history.replaceState(nextURL);
</script>

问题：这个脚本完美运行，除了每次我刷新联系人页面时，它都会再次附加参数。我该如何解决这个问题？

【问题讨论】：

标签： javascript

【解决方案1】：

使用URL 和URLSearchParams 为您解析和修改URL。这样你就不必做任何工作来产生一个有效的字符串：

function buildUrl(fromURL, fromQuery) {
  const url = new URL(fromURL);
  
  const query = new URLSearchParams(fromQuery);
  for (const [key, value] of query) {
    url.searchParams.set(key, value);
  }
  
  return url.toString()
}

function test(fromURL, fromQuery) {
  const url = buildUrl(fromURL, fromQuery);
  return `fromURL: ${fromURL}
fromQuery: ${fromQuery}
result: ${url}
---------------------`;
}

console.log(test("http://example.com", ""));
console.log(test("http://example.com", "foo=1"));
console.log(test("http://example.com", "foo=1&bar=2"));
console.log(test("http://example.com", "foo=1&bar=2&baz=3"));

console.log(test("http://example.com?hello=world", ""));
console.log(test("http://example.com?hello=world", "foo=1"));
console.log(test("http://example.com?hello=world", "foo=1&bar=2"));
console.log(test("http://example.com?hello=world", "foo=1&bar=2&baz=3"));

console.log(test("http://example.com?bar=someValue", ""));
console.log(test("http://example.com?bar=someValue", "foo=1"));
console.log(test("http://example.com?bar=someValue", "foo=1&bar=2"));
console.log(test("http://example.com?bar=someValue", "foo=1&bar=2&baz=3"));

【讨论】：

【解决方案2】：

您总是可以快速执行 if 语句来检查当前 URL 中是否存在参数，如果不存在，则添加它。

if(window.location.href.indexOf("?" + parameters) == -1){
  const nextURL = window.location.href + '?' + parameters;
  window.history.replaceState('', '', nextURL);
}

【讨论】：