javascript - 如何在不影响其他参数值的情况下改变url参数值

Question

我在这里尝试根据点击的按钮将其中一个 URL 参数值更改为 true 或 false。

在这里说我有一个网址

127.0.0.1:8080/cars/model?id=2003&styleAttrSaved=false&copyfalse=copy

我想根据我点击的按钮将值 styleAttrSaved 更改为 true 或 false，而不影响任何其他参数，因此一旦我更改值，url 将保持不变，只有那个值发生变化。

这是我尝试过的。

$('.submitForm').click(function(){
    var currentUrl = window.location.href;
    var cleanUrl = currentUrl.substring(0,currentUrl.indexOf('&')

    if($(this).attr('data-des') == true){
      var savedUrl = "&styleAttrSaved=true";
    } else {
      var savedUrl = "&styleAttrSaved=false";
    } 
        var finalUrl = cleanUrl+savedUrl;
    history.pushState(null,null,finalUrl);
});


<button class="submitForm" data-des="true">Submit true</button>
<button class="submitForm" data-des="false">Submit false</button>

在代码中，我试图通过使用子字符串方法来替换值。我在这里面临的问题是，如果我使用这种方法，整个 URL 都会被更改

例如如果我有网址

127.0.0.1:8080/cars/model?id=2003&styleAttrSaved=false&copyfalse=copy

在我应用上述功能后，这是我返回的 URL

127.0.0.1:8080/cars/model?id=2003&styleAttrSaved=true

在上面的输出 url 中，您可以看到 styleAttrSaved 的值已更改，但其他参数值 copyfalse=copy 在新 url 的输出中不再可用。我不想从 URL 中删除其他参数，但我应该只更改 URL 中一个参数的值，以便 url 保持不变，只是 styleAttrSaved 的值像这样更改为 true

127.0.0.1:8080/cars/model?id=2003&styleAttrSaved=true&copyfalse=copy

我该怎么做？

Answer 1

您可以使用 URLSearchParams轻松为您更改参数。目前在 IE 和 Safari 移动版中不支持它，但有一个 polyfill为他们

var myURL = "127.0.0.1:8080/cars/model?id=2003&styleAttrSaved=false&copyfalse=copy";

let parsedURL = new URL(`http://${myURL}`);

parsedURL.searchParams.set("styleAttrSaved", true);

console.log(parsedURL.toString());