Javascript localstorage：获取包含许多项的特定localstorage值

在localstorage中，我有一个键“results”，其中包含以下值：

[{"id":"item-1","href":"google.com","icon":"google.com"},
{"id":"item-2","href":"youtube.com","icon":"youtube.com"},
{"id":"item-3","href":"google.com","icon":"google.com"},
{"id":"item-4","href":"google.com","icon":"google.com"},
{"id":"item-5","href":"youtube.com","icon":"youtube.com"},
{"id":"item-6","href":"asos.com","icon":"asos.com"},
{"id":"item-7","href":"google.com","icon":"google.com"},
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}]

要获取最后一项，我使用以下方法：

// this is how I parse the arrays
var result = JSON.parse(localStorage.getItem("result")); 


for(var i=0;i<result.length;i++) {
    var item = result[i];
    $('element').val(item.href);
}

//我就是这样解析数组的
var result=JSON.parse（localStorage.getItem（“结果”）；
对于（var i=0；ijQuery，它有一个过滤器助手：

$(result).filter(function(){return this.id == "item-3";})[0]

具有特定id的项目的href函数为：

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

示例用法为：

var href = getItemHrefById(result, "item-3");

您可以在上看到工作示例

更新

如果无法从本地存储中读取项，则可能在设置值时忘记调用JSON.stringify：

localStorage["results"] = JSON.stringify([{"id":"item-1","href":"google.com","icon":"google.com"}, 
{"id":"item-2","href":"youtube.com","icon":"youtube.com"}, 
{"id":"item-3","href":"google.com","icon":"google.com"}, 
{"id":"item-4","href":"google.com","icon":"google.com"}, 
{"id":"item-5","href":"youtube.com","icon":"youtube.com"}, 
{"id":"item-6","href":"asos.com","icon":"asos.com"}, 
{"id":"item-7","href":"google.com","icon":"google.com"}, 
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}])

您需要将json转换为字符串以正确序列化（并使用json.parse返回json）

这是最后一个例子

编辑

正如无用代码所指出的，这个方法比本机过滤函数要慢得多（和自定义循环，但我认为引入几行新代码来节省20-30毫秒是过分的，除非性能是个问题），所以我正在更新我的示例，不使用jquery过滤器。+1请给出他的答案

另外，这里需要指出的是，如果这个数组有数百个书签而不是8个书签，那么for循环在统计上可能会快两倍（因为它不必遍历数组的其余部分）但是，在这种情况下，将for循环放入函数中可能是一个好主意，该函数返回满足条件的第一个找到的项，并且使用它可能甚至可以连接到数组。
使用本机
数组。筛选器
如果您只针对现代浏览器（IE9+或任何其他主流浏览器），那么可以使用JavaScript 1.6数组方法


在数据上手动循环
如果你不能使用过滤器，你很可能只会使用一个循环：

var testItem,
    data = [{"id":"item-1","href":"google.com","icon":"google.com"},
{"id":"item-2","href":"youtube.com","icon":"youtube.com"},
{"id":"item-3","href":"google.com","icon":"google.com"},
{"id":"item-4","href":"google.com","icon":"google.com"},
{"id":"item-5","href":"youtube.com","icon":"youtube.com"},
{"id":"item-6","href":"asos.com","icon":"asos.com"},
{"id":"item-7","href":"google.com","icon":"google.com"},
{"id":"item-8","href":"mcdonalds.com","icon":"mcdonalds.com"}];

function getItemById(data, id) {
    var i, len;
    for (i = 0, len = data.length; i < len; i += 1) {
        if(id === data[i].id) {
            return data[i];
        }
    }

    return undefined;
}

testItem = getItemById(data, 'item-3');

这将使访问项目更加容易和快捷：

var data = JSON.parse(localStorage.getItem("result")); 
data["item-3"].href;

对于jquery filter方法，我认为使用回调函数和bind搜索参数更优雅和可读：

function filterById(id, i, obj) {
    return obj.id === id;
}

function getItemHrefById(json, itemId) {
    return $(json).filter(filterById.bind(null, itemId))[0].href;
}


（不过，对于这个问题，我更喜欢“for-loop”方法！！）
我在何处使用哪一个？它似乎对我不起作用……而且也没有意义。getItemById不是变量？jQuery方法用于过滤DOM节点，而不是JSON数据或数组。@jQuerybeast抱歉，我的示例有缺陷，您需要调用我创建的函数，而不是getItemById，我有固定的示例，并添加了JSFID link，您可以看到它的用法。@您提供的链接中的无用代码：“过滤器描述：将匹配元素集减少到与选择器匹配或通过函数测试的元素集。”本例中的匹配元素集是json数组。没有任何东西阻止您使用它。@GoranObradovic“匹配元素集”"指在创建jQuery对象时由选择器匹配的DOM元素。jQuery将接受非DOM对象，这是一种非常普遍的情况，您可以使用它来过滤泛型数组，但它实际上并不意味着过滤泛型数组。无论如何，创建jQuery实例会产生大量不必要的错误。t他的方法比使用自定义循环要慢得多，该循环在找到要搜索的项时立即返回，或者
Array.prototype.filter（）
。这里的速度比较：您好，谢谢。在我的用法中，我将testItem设置为JSON.parse（localStorage.getItem（“result”））。当我这样做时，所有的结果都是未定义的。我真的不知道如何解释这一点，但我并没有像您那样设置所有的值。我正在解析它们，然后在这两个示例中都未定义。@jquery虽然最初的示例只是设置测试数据，然后通过闭包访问它，但我已将其更改为在中用作参数相反，您可以通过传递数据来调用它：
testItem=getItemById（JSON.parse（localStorage.getItem（“result”），“item-3”）；
。如果您需要获取多个项目，您可能应该将
JSON.parse（localStorage.getItem（“result”）的结果分配给它
改为变量，而不是内联调用。@Hugolpz你倾向于改变太多的答案。你改变代码，你就改变了意义。我个人永远不会批准这些编辑。我不会为这一点与你争论，但我个人的建议是不要做这样的改变。请随意修改语法和拼写，但让作者修改代码或修改变量不可编辑的名称或任何东西。不要自己做。@ShadowWizard:web 2.0。如果是澄清，更好的澄清，更好的层次分割，更好的可读性：让我们做吧。
var data = JSON.parse(localStorage.getItem("result")); 
data["item-3"].href;

function filterById(id, i, obj) {
    return obj.id === id;
}

function getItemHrefById(json, itemId) {
    return $(json).filter(filterById.bind(null, itemId))[0].href;
}