对象未推入本地存储阵列

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));

对象未推入本地存储阵列

Objects are not pushing into Local Storage Array

javascript

local-storage

ecmascript-6