title: How to remove only one specific data which appears multiple time in localStorage
body: <p>I have items that I add to the cart by storing them in a localStorage with their ID.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('click', '.set-cart-info', function () {
      // We retrieve the product id which is stored in the url
      var url_id = window.location.search;
      var id = url_id.split('?id=').pop();
      // We retrieve the data from the localStorage
      var cartItems = localStorage.getItem('teddy_id');
      // If there is no data, we create an array
      cartItems = cartItems ? cartItems.split(',') : [];
      // Add the new data to the array
      cartItems.push(id);
      // We save the data in the localStorage
      localStorage.setItem('teddy_id', cartItems.toString());
  });</code></pre>
  </div>
  </div>
  </p>
  <p>In the console.log I get this :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>localStorage.getItem('teddy_id')
  
  "5beaacd41c9d440000a57d97,5beaabe91c9d440000a57d96,5beaabe91c9d440000a57d96,5beaaa8f1c9d440000a57d95,5beaabe91c9d440000a57d96,5beaaa8f1c9d440000a57d95,5beaabe91c9d440000a57d96,5beaacd41c9d440000a57d97,5beaaa8f1c9d440000a57d95,5beaaa8f1c9d440000a57d95,5beaaa8f1c9d440000a57d95,5beaabe91c9d440000a57d96,5beaacd41c9d440000a57d97,5beaacd41c9d440000a57d97,5beaacd41c9d440000a57d97,5beaacd41c9d440000a57d97,5beaacd41c9d440000a57d97,5beaaa8f1c9d440000a57d95"</code></pre>
  </div>
  </div>
  </p>
  <p>Then, I added the possibility of adding or removing a quantity of a product by retrieving the product ID and adding it to the localStorage, my problem is as follows: when I retrieve the ID to fetch it in the localStorage, it deletes all items with this ID, I would like it to remove only one.</p>
  <p>Here is the code that allows to add a quantity, and the one that should be modified so that it also removes only one :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('click', '.add_qty', function () {
      // We retrieve the product id which is stored in the class
      var split_class = this.className.split(' ');
      var this_id = split_class[1];
      var cartItems = localStorage.getItem('teddy_id');
      cartItems = cartItems ? cartItems.split(',') : [];
      cartItems.push(this_id);
      localStorage.setItem('teddy_id', cartItems.toString());
  });
  
  $(document).on('click', '.remove_qty', function () {
      // We retrieve the product id which is stored in the class
      var split_class = this.className.split(' ');
      var this_id = split_class[1];
      var cartItems = localStorage.getItem('teddy_id');
      cartItems = cartItems ? cartItems.split(',') : [];
  
      // This is the part that retrieve the product by his ID and delete all product with this specific ID
      var newStorage = cartItems.filter(function(r) { return r !== this_id});
      localStorage.setItem('teddy_id', newStorage.toString());
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>$('.product_in_cart' + '.' + ID._id).append('
  &lt;td class="product_in_cart_changeqty"&gt;
  &lt;button onClick="window.location.reload()" class="add_qty ' + ID._id + '"&gt;+&lt;/button&gt;
  &lt;button onClick="window.location.reload()" class="remove_qty ' + ID._id + '"&gt;-&lt;/button&gt;
  &lt;/td&gt;');</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks in advance for your time and help :)</p>