删除存储在localStorage中的数组中的项目

时间:2019-12-19 21:39:22

标签: javascript local-storage

我将一些数据显示到表中,并且每行都有Delete button,单击按钮时应该将Delete数组中的项通过传递id并存储在localStorage中,然后将其分配回LocalStorage。

HTML:

<table>
     <tbody id="ResultProduct">
       <tr class="RMAJS">
          <td><input type="text" id="item1" name="itemName" value="Computer" /></td>
          <td><a data-localstorage-id='ae90ac1a-64c4-49a7-b588-ae6b69a37d47' class="deletebtn">Delete</a></td>
       </tr>
       <tr class="RMAJS">
         <td><input type="text" id="item2" name="itemName" value="Mobile" /></td>
         <td><a data-localstorage-id='6b1ccc7e-322c-4f5f-81f9-b1fd68c0eb8b' class="deletebtn">Delete</a></td>
       </tr>
    </tbody>
</table>

LocalStorage:

["ae90ac1a-64c4-49a7-b588-ae6b69a37d47","6b1ccc7e-322c-4f5f-81f9-b1fd68c0eb8b"]

0: "ae90ac1a-64c4-49a7-b588-ae6b69a37d47"
1: "6b1ccc7e-322c-4f5f-81f9-b1fd68c0eb8b"

JavaScript:

$('#ResultProduct').on('click', '.deletebtn', function (e) {
    var targetElement = $(e.target);
    var getID = $(targetElement).attr("data-localstorage-id");
    var getLocalStorage = JSON.parse(localStorage.getItem("users"));

    for (var i = 0; i < getLocalStorage.length; i++) {
        var Val = getLocalStorage[i]

        //Here is my problem for example i want to delete this item 
       //"6b1ccc7e-322c-4f5f-81f9-b1fd68c0eb8b" from array 
       //How can i do that ??

       localStorage.setItem('users', JSON.stringify(??)); //Assign it back to LocalStorage.
    }

    $(targetElement).closest("tr.RMAJS").remove();
})

1 个答案:

答案 0 :(得分:1)

$('#ResultProduct').on('click', '.deletebtn', function (e) {
    var targetElement = $(e.target);
    var getID = $(targetElement).attr("data-localstorage-id");

    var getLocalStorage = JSON.parse(localStorage.getItem('users'));
    getLocalStorage = getLocalStorage.filter(e => e !== getID);
    localStorage.setItem('users', JSON.stringify(getLocalStorage));

    $(targetElement).closest("tr.RMAJS").remove();
});