对象未推入本地存储阵列 [重复]

Question

帮帮我！我将一组对象设置到本地存储中。我遇到的问题是，每当我推送新对象时，它都会删除最后一个对象并存储新对象并使用新对象存储数组更新。并只保留单个对象。但我想在数组中设置多个对象。我找不到我做错了什么。

    let recent_searched = [];
    let searched_item = {}
    
    const storeLocal = (e) => {
            searched_item['artwork'] = "image.jpg"
            searched_item['itemName'] = "Harry Potter"
            searched_item['itemWriterName'] = "J K Rowling"

            recent_searched.push(searched_item)

            localStorage.setItem("recent_searched", JSON.stringify(recent_searched));
     }

    console.log(JSON.parse(localStorage.getItem("recent_searched")))

Answer 1

您的代码只创建 一个 普通对象。它是用let searched_item = {} 定义的。您的其余代码仅改变该单个对象，即使它已经存在于数组中。因此，您只需将重复的对象引用附加到您的数组。

每次将其推送到数组时，您都需要创建一个单独的对象。所以：

let recent_searched = [];

const storeLocal = (e) => {
    let searched_item = {   // This creates(!) an object
        artwork: "image.jpg",
        itemName: "Harry Potter",
        itemWriterName: "J K Rowling"
    };
    recent_searched.push(searched_item)

    localStorage.setItem("recent_searched", JSON.stringify(recent_searched));
}

如果您的页面重新加载，请注意您的数组变量不是从头开始维护和创建的。因此，请确保在页面加载时，读取本地存储中的内容：

let stored = localStorage.getItem("recent_searched");
let recent_searched = stored ? JSON.parse(stored) : []; 

Answer 2

localStorage.setItem 就像一个替换函数，它会尝试添加一个为提供的键传递的值，如果该键已经存在于本地存储中，那么它将用新值替换旧值。

您需要在保存之前获取旧值并将新值附加到它。

类似的东西

    let recent_searched = [];
    let searched_item = {};
    const data = await localStorage.getItem("recent_searched");
    if(data){
         recent_searched = JSON.parse(data);
    }
    searched_item['artwork'] = "image.jpg"
    searched_item['itemName'] = "Harry Potter"
    searched_item['itemWriterName'] = "J K Rowling"
    
    recent_searched.push(searched_item)
    
    localStorage.setItem("recent_searched", JSON.stringify(recent_searched));