LocalStorage 使用 JavaScript 从对象中删除项目答案

【问题标题】：LocalStorage remove item from object using JavaScriptLocalStorage 使用 JavaScript 从对象中删除项目
【发布时间】：2020-06-20 21:00:36
【问题描述】：

我想从本地存储对象中删除一个项目：

addToFavs: [{"fav-name":"fav-787336"},{"fav-name":"fav-255890"}]

我存储了信息，然后我检查了是否找到了该项目，我应该将其删除：

/*** getID is the items clicked ***/

var retrievedData = localStorage.getItem("addToFavs");
    
    var parseData = jQuery.parseJSON(retrievedData);

    $.each(parseData, function(x,y){
        if(y['fav-name'] == getID){
            console.log(getID+' found on '+x);
            console.log(parseData[x]);
            localStorage.removeItem(parseData[x]);
            console.log(x+' removed');
        } else {
            console.log(getID+' NOT NOT found on '+x);
        }

}); // end $.each

提前致谢

【问题讨论】：

使用Array.prototype.filter()
如何在我的代码中实现它？我尝试了很多方法，但都失败了

标签： javascript local-storage javascript-objects

【解决方案1】：

你不能这样做：

localStorage.removeItem(parseData[x]);

您需要更新您解析的数组，或者创建一个新数组，然后stringify 将其返回 JSON，然后setItem 更新 localStorage 中的值。因为 localStorage 只能存储字符串，不能存储数组或对象。

filter 是个不错的方法：

var jsonString = localStorage.getItem("addToFavs");
var arr = JSON.parse(jsonString);
// Filter to keep only those with a different ID than getID
arr = arr.filter(function(item) { return item['fav-name'] !== getID; });
// Store it back, stringified
localStorage.setItem("addToFavs", JSON.stringify(arr));

【讨论】：

【解决方案2】：

本地存储中的值为字符串
按键读取本地存储值
解码字符串值
应用 Array.prototype.filter 函数将值从数组中过滤掉
对数组值进行编码
使用相同的密钥将其写入本地存储

【讨论】：

【解决方案3】：

不要吓到你什么的

addToFavs: [{"fav-name":"fav-787336"},{"fav-name":"fav-255890"}]。 addToFavs 是本地存储中的项目，而不是您存储的对象。

而本地存储只支持将string:string类型存储为item:value，所以

localStorage.removeItem(parseData[x]);

它实际上在你的字符串化对象内部，它本身就是 addToFavs 项目的值，

因此您必须从对象中删除该项目并再次存储addToFavs，如下所示。

var ls = window.localStorage;
ls.setItem('addToFavs', '[{"fav-name":"fav-787336"},{"fav-name":"fav-255890"}]');

var getId = 'fav-787336';

var item = JSON.parse(ls.getItem('addToFavs'));

var updatedItems = item.filter(val => (val['fav-name'] === getId));

console.log(updatedItems);

//update loacl storage again

ls.setItem('addToFavs', JSON.stringify(updatedItems))

代码不会运行，因为出于安全考虑，未授予 localStorage 访问权限，请随意在浏览器控制台中运行代码。

【讨论】：