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

Question

这应该不是一项艰巨的任务，但我遇到了一些问题。我有一个代码，单击时会从本地存储中删除项目，但它没有按预期工作。当此代码仅出现一次时，它就会起作用。但是，该代码需要多次使用(每个 div 一个)。当为每个 div 添加所有单独的代码块时，所有本地存储项都会同时删除(04、05、06、07...)。它不会从点击来源的 div 中删除目标 localstorage 项目。 所有需要删除的项目都以数字结尾，例如“state08、city08、country08、city09、state10、city10”等。我知道本地存储只存储字符串，所以我相信这是问题的根源。话虽如此，我试图让我的代码能够处理每个字符串末尾出现的数字。有谁知道如何让它发挥作用？

      $('.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”本地存储项，如下所示出色地。我需要此代码为每个号码独立工作，以便用户可以清除给定的本地存储项目而不打扰其他人。谁能帮我解决这个问题吗？谢谢。

Answer 1

根据我所读到的内容，当用户单击 .clear_button 类时，所有绑定(bind)的函数都将被执行，因此，如果您有 n = 1...5，您将拥有 5 个 .clear_button 的单击处理程序，并且每个处理程序都会执行将从 localStorage 中删除相关项目，该项目以 1、2、3、...、5 结尾。这就是您删除任何内容的原因。但我仍然不清楚全局情况以及您想要实现的目标。

您可以在每个 .clear_button 的数据属性中存储一个数字，并使用它来清除，这样您只需要一个处理程序(而不是 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、. ..).