javascript - 如何从本地存储中删除以特定编号结尾的项目？

这不是一个艰巨的任务，但我遇到了一些问题。我有一个代码，单击该代码可从localstorage中删除项目，但无法正常工作。当此代码仅出现一次时，它将起作用。但是，该代码将需要多次使用（每个div一个）。当为每个div添加所有单独的代码块时，所有本地存储项都将同时删除（04、05、06、07，...）。它不会从产生点击的div中删除目标本地存储项。
所有需要删除的项目都以数字结尾，例如“ state08，city08，country08，city09，state10，city10”，等等。我知道localstorage仅存储字符串，因此我相信这是问题的根源。因此，我正在设法使我的代码能够处理每个字符串末尾出现的数字。有谁知道如何使它工作？

      $('.clear_button').each(function(){
        $(this).click(function(){
        var num = 05;
        var n = num.toString();
        Object.keys(localStorage)
        .filter(key => key.endsWith(n))
        .forEach(key => localStorage
        .removeItem((key)))
    });
});
      $('.clear_button').each(function(){
        $(this).click(function(){
        var num = 06;
        var n = num.toString();
        Object.keys(localStorage)
        .filter(key => key.endsWith(n))
        .forEach(key => localStorage
        .removeItem((key)))
    });
});


  <fieldset id="fieldset18">
  <label >Country</label>
   <select id="country18" class="country" name="country">
       <?php include("countryAjaxData.php"); ?>
    </select>
    <label State;</label>
    <select id="state18" class="state" name="state">
       <option value="" selected="selected">State</option>
    </select>
     <label >City</label>
     <select id="city18" class="city" name="city">
       <option value="" selected="selected">City</option>
      </select>
    </fieldset>
    <div>
    <p class="clear_button">clear</p>
     </div>

在这里，我试图将05转换为字符串，然后删除所有以“ 05”结尾的字符串，但是它不起作用，因为具有“ 06”的代码也将触发并删除所有“ 06”本地存储项。我需要此代码针对每个数字独立工作，以便用户可以清除给定的本地存储项，而不会打扰其他人。谁能帮我解决这个问题？谢谢。

最佳答案

根据我的了解，当用户单击.clear_button类时，将执行所有绑定的函数，因此，如果您具有n = 1 ... 5，则将有5个.clear_button单击处理程序，每个单击处理程序都将删除相对于localStorage的项目，该项目以1、2、3，...，5结尾。这就是为什么要删除任何内容的原因。但是我仍然不清楚全球情况以及您要实现的目标。

您可以在每个.clear_button的data属性中存储一个数字，并使用该数字进行清除，这样，您只需要一个处理程序（与n个处理程序相比）：

<a class=".clear_button" data-num="1">Remove 1</a>
<a class=".clear_button" data-num="2">Remove 2</a>
... etc ...
<a class=".clear_button" data-num="n">Remove n</a>

$( '.clear_button' ).click(function(){
  var n = $( this ).data( 'num' );
  Object.keys(localStorage)
    .filter(key => key.endsWith(n))
    .forEach(key => localStorage
    .removeItem((key)))
});

在评论中回复后进行编辑

<fieldset id="fieldset18">

  <label>Country</label>
  <select id="country18" class="country" name="country">
    <?php include("countryAjaxData.php"); ?>
  </select>

  <label>State</label>
  <select id="state18" class="state" name="state">
    <option value="" selected="selected">State</option>
  </select>

  <label>City</label>
  <select id="city18" class="city" name="city">
    <option value="" selected="selected">City</option>
  </select>

</fieldset>

<div><p class="clear_button" data-num="18">clear</p></div>

此外，如果localStorage项具有固定的名称和不同的结束号，则jQuery代码也可以简化为：

$( '.clear_button' ).click(function(){
  var n = $( this ).data( 'num' );
  localStorage.removeItem( 'city' + n );
  localStorage.removeItem( 'state' + n );
  localStorage.removeItem( 'country' + n );
  ...
});

请注意，如果您必须添加数字，我并没有使用零填充，但是我会留下项目名称，例如city1，city2，...等，而没有零（city01，city02，...）。

关于javascript - 如何从本地存储中删除以特定编号结尾的项目？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59888400/