如何从 localStorage 获取唯一 ID 以删除按钮答案

【问题标题】：How to get unique id from localStorage for delete button如何从 localStorage 获取唯一 ID 以删除按钮
【发布时间】：2016-05-12 14:51:56
【问题描述】：

我一直在尝试从 localStorage 获取 id，但无法实现。我在events 中的localStorage 包含如下内容。

[{"id":"ef5","title":"wan","start":"2016-05-12","end":"2016-05-13"},{"id":"ef6","title":"wana","start":"2016-05-21","end":"2016-05-22"},{"id":"ef7","title":"haha","start":"2016-05-25","end":"2016-05-26"},{"id":"ef8","title":"asdas","start":"2016-05-20","end":"2016-05-21"},{"id":"ef9","title":"sdas","start":"2016-05-19","end":"2016-05-20"}]

现在我将提供 2 种使用我迄今为止尝试过的不同方法的编码。有关信息，我浏览了这个主题：localstorage: Get specific localstorage value of which contains many items 但没有一个适合我。

我确实尝试过如下编码：

第一种方法：

$("#deleteEventYes").click(function(){
var indexDel = localStorage.getItem("events");
var deleteId = calEvent.id;
var result = localStorage.getItem("events"); 


    function getItemHrefById(json, itemId){ 
    return $(json).filter(function(){return this.id == itemId;})[0].href; 
    } 

    var href = getItemHrefById(result, deleteId);   

    alert(href);   });

上面的代码显示了某种数组方法（我认为），其中我使用 indexDel 从 localStorage (events) 获取项目，而 deleteId 我从 calEvent.id 获取，这是已单击事件的 id为了被删除。除此之外，我想你们知道它是什么。但是对于这种方法，我使用result 变量而不是 indexDel。因此，如果我从 localStorage 获取项目 2 次，请不要介意

第二种方法：

for (var i = 0 ; i < indexDel.length ; i += 1) {
    if(deleteId == indexDel[i].id) {
    return indexDel[i];
    console.log(deleteId);
    console.log(indexDel[i]);
    }
}
return null;

我认为上面的代码使用了自定义循环。 indexDel 的变量声明仍然与第一种方法相同。我尝试使用重构方法，但我似乎很难理解它是如何完成的。是因为我的变量放置错误吗？还是因为不适合我的情况？

注意：我想删除 eventClick 函数中的一个事件，到目前为止，我确实检索了 id 并根据 id 从日历中删除了该事件。但是，我现在唯一的问题是将已删除的事件 id 与我的 localStorage 中的 id 匹配并删除该项目。到目前为止，从 id 获取 id 对我来说非常复杂。

更新

我已经做过类似的事情，但仍然无法正常工作。谁能告诉我这里出了什么问题？它没有给我任何错误，但它什么也不做。连删除都不行。 https://jsfiddle.net/v35a2o07/3/

【问题讨论】：

localStorage 将值存储为字符串。在对它们进行操作之前，请务必 JSON.parse() 您的值。 :)
你的意思是这样的吗？ jsfiddle.net/v35a2o07 它不起作用 :( 我想我可能会误解变量放置。这就是为什么我很难遵循这种方法
使用delete关键字删除数组元素。
@AhKing 小提琴不完整。 jQuery未定义，处理程序未关闭（即});），元素#deleteEventYes不存在...
@War10ck 这只是我删除部分的编码。此外，我的完整编码现在一团糟：P。所以如果我暂时不给满一个可能会更好。对此感到抱歉。反正我已经解决了。

标签： javascript jquery fullcalendar local-storage

【解决方案1】：

没关系。我想我明白了:) 这是因为我在使用splice 后忘记了setItem 和stringify。在这里，我可以假设 splice 与在 w3school 上写的 add/remove 相同 http://www.w3schools.com/jsref/jsref_splice.asp

“splice() 方法在数组中添加/删除项目，并返回删除的项目。”

我的最终代码在这个小提琴上：https://jsfiddle.net/v35a2o07/4/

所以这个概念是：

1) 第一步是声明一个解析本地存储键的变量，例如var items = JSON.parse(localStorage["events"]);，以便您可以将其用于循环

2) 使用for循环根据我们在1号上解析的localStorage key来判断localStorage的长度

3) 使用 if 语句检查 localStorage 数据与我们想要的数据如if(items[i].id == deleteId){ 之间的比较

4) 这是可选的但很重要。为了使您能够检查比较是否正确，请创建一个警报或 console.log() 并将其字符串化，因为如果不这样做，您将只会看到 [object,object]。 alert(JSON.stringify(items[i])+"<<<>>>"+deleteId);之类的编码，如果你想确定，也写一些else statement。

5) 当所有条件都正确时，你就可以对它做一些动作了。就我而言，我只是使用splice() 删除它。它也可用于添加项目。我不确定它是如何完成的，但尝试搜索它以获取更多信息。

6) 拼接好之后，就可以安全的断掉，脱离循环了。

7) 这很重要，否则将不起作用。不要忘记将其设置回 localStorage 并将其字符串化，例如 localStorage.setItem('events', JSON.stringify(items));

就是这样。我希望这能帮助任何需要它的人。如果我有错误的陈述或错误的概念，请更正并为任何人澄清。

干杯。

【讨论】：