title: Javascript does not recognise two url parameters as equal even though they are equal
body: <p>I am using React.js and trying to filter store products based on the parameters that the user has chosen from a set of . When clicking on an input, &quot;onChange&quot; fires a function that takes the  name and the  value, encodes it, and puts it into the URL search query as a key/value pair.</p>
  <p>Everything is working fine, except in one instance. When the user changes their mind and picks a different answer in the , my javascript code is supposed to:</p>
  <ol>
  <li>Get the current URL parameters,</li>
  <li>Check if the  name is already in the URL param as a key,</li>
  <li>If it already is inside the URL param, don't add a new param, instead change the value of the key,</li>
  <li>Take the new set of URL parameters and use those instead.</li>
  </ol>
  <p>The good news is that this works for most key/pairs. For example:</p>
  <ol>
  <li>{ Color: #fffff } would look like this in the URL &quot;?Color=%23FFFFFF&quot;. If the user changed the color the  URL parameter also changed.</li>
  </ol>
  <p>But...</p>
  <ol start="2">
  <li>I have a  name &quot;WITH USB 3 PORTS&quot; that looks like this, when added to the URL param - &quot;?With%2520USB%25203%2520ports=Yes&quot; , but when I try to change the value to &quot;No&quot; in the  for some reason my javascript thinks that &quot;With%2520USB%25203%2520ports&quot; is not the same as &quot;With%2520USB%25203%2520ports&quot;. It does not do this for &quot;Color&quot; or any other key/value pair.</li>
  </ol>
  <p>Can anyone explain why this might be the case and how to stop this from happening?</p>
  <p>To give some more context, I use:</p>
  <ol>
  <li>window.location.search -&gt; to get the URL params</li>
  <li>encodeURIComponent()   -&gt; to prepare the values to be used a key/value pairs</li>
  <li>new URLSearchParams()  -&gt; to create the new params</li>
  <li>window.location.href   -&gt; to refer the user to the new URL (I will later use history.pushState())</li>
  </ol>
  <h2>UPDATE #1</h2>
  <p>Based on @Cerbrus recommendation, I added the code that creates this issue.</p>
  <pre><code>    //* Change the url params when the user changes the filter inputs
      changeUrlParam = () =&gt; {
  
          //* Prepare localhost variable
              const baseUrl = 'http://localhost:3000'
  
          //* Get current path name
              const pathName = window.location.pathname;
          
          //* Get current url parameters if any
              const urlQuery = window.location.search;
              const pureParam = urlQuery.replace('?', '');
  
          //* Create a new param
              const params = urlQuery.length &lt; 1 ? new URLSearchParams() : new URLSearchParams(pureParam);
      
          //* Prepare the value/key pair
              const key = encodeURIComponent('With Usb 3 Ports');
              const value = 'Yes';
  
          //* If the params - ARE NOT SET
              if(urlQuery.length &lt; 1) {
                  //* Apend new value to it
                      params.append(key, value);
  
          //* If the params - ARE SET
              } else {
                  //* Check if the param in question is already set
                      const paramTest = urlQuery.includes(key);
  
                  //* If present - change it
                      if(paramTest === true) { 
                          //* Change the old value to the new value
                              params.set(key, value);
                  //* If not present - apend it
                      } else {
                          //* Add the new value to the exsisting param
                              params.append(key, value);
                      }
              }
  
          //* Prepare the new url
              const newUrl = baseUrl + pathName + '?' + params.toString();
      
          //* Go to the new url
              return window.location.href = newUrl;
      };
  </code></pre>