如何从 localStorage 中删除对象或数组？答案

【问题标题】：How do I delete an object or array from localStorage?如何从 localStorage 中删除对象或数组？
【发布时间】：2014-04-16 16:22:37
【问题描述】：

我知道使用localStorage.removeItem(key) 我可以按键删除一个项目。如果我的localStorage 是一维的（即localStorage.search_near = 60654），那很好。

但我有多层次的价值观。

我的localStorage.storedAddresses 包含 json 对象：

[{
    "storeNumber": "010517",
    "zip": "20500",
    "state": "DC",
    "city": "WASHINGTON",
    "address": "1600 Pennsylvania Ave",
    "zone": null,
    "address_two": null,
    "name": "Second Choice",
    "type": "P",
    "dwellCode": "P",
    "key": 4,
    "defaultLocation": "N"
},
{
    "storeNumber": "714389",
    "zip": "60202",
    "state": "IL",
    "city": "EVANSTON",
    "address": "818 Brown Ave",
    "zone": null,
    "address_two": null,
    "name": "Test Storage",
    "type": "P",
    "dwellCode": "P",
    "key": 3,
    "defaultLocation": "N"
},
{
    "storeNumber": "316740",
    "zip": "70810",
    "state": "LA",
    "city": "BATON ROUGE",
    "address": "9884 BLUEBONNET BLVD",
    "zone": null,
    "address_two": null,
    "name": "Test2",
    "type": "P",
    "dwellCode": "P",
    "key": 2,
    "defaultLocation": "N"
}]

我将如何使用 localStorage.removeItem() 仅删除 storeNumber 为 714389 的对象？我是否必须 loop through localStorage.storedAddresses 并比较 storeNumber 值，然后在找到匹配项时使用 removeItem ？还是有更直接的方法？

【问题讨论】：

您可能需要在这里重新考虑您的数据结构。 localStorage 只能存储字符串。是的，这允许您存储 JSON 字符串，但是如果您真的想与序列化为 JSON 的数据结构进行交互，您将需要反序列化它然后使用它。这可能是很多开销。为什么不直接为每个商店编号存储一个条目？
因为这些是客户保存的地址，我们需要与它们作为一个整体进行多次交互 - 即填充下拉框。获取localStorage.storedAddresses 比弄清楚我们想要哪些项目更容易。
好的。即便如此，您可能需要考虑将您的数据结构更改为一个对象，其中存储数字值作为与其余数据一起嵌套对象的键。如果没有这个，您将需要迭代整个对象数组以找到您正在寻找的商店。

标签： javascript local-storage

【解决方案1】：

由于 localstorage 只能存储字符串，所以你必须使用 JSON.parse 解析值并手动删除它，然后重新插入。

var storedAddresses = JSON.parse(localStorage.storedAddresses); 
// storedAddresses is now an array of objects, not just a string

for ( var i = 0; i < storedAddresses.length; i++ ) {
    if ( storedAddresses[i].storeNumber === '714389' ) {
        // remove the object with storeNumber '714389' from the array
        storedAddresses.splice(i,1); 
    }
}

// insert the new stringified array into LocalStorage
localStorage.storedAddresses = JSON.stringify(storedAddresses);

【讨论】：

我不明白。我要重新插入什么？
@EmmyS 我注释了代码，希望更容易理解。

【解决方案2】：

如果您使用 jQuery，您可能需要使用 grep 来搜索数组。有关更多信息，请参阅此内容：

Find object by id in an array of JavaScript objects

您还可以使用这些库来查询 JSON 结构：

http://orangevolt.blogspot.com/2012/12/8-ways-to-query-json-structures.html

【讨论】：