Javascript 单击时在对象数组中追加新数据

页面中有一个新闻文章列表。每次用户单击它，它都会将新闻id和标题保存到localstorage。每次单击“新建项”时，我的代码都会替换本地存储数据

如何将新数据附加到本地存储中

设置本地存储

awardForArticleRead: function(latestNews){
    var articleData = {};
    articleData['newsId'] = latestNews.news_id;
    articleData['newsTitle'] = latestNews.title;
    localStorage.setItem("articleRead",  JSON.stringify(articleData));
},

awardForArticleRead: function(latestNews){
    var store = JSON.parse(localStorage.getItem("articleRead") || '[]');
    store.push({
        newsId: latestNews.news_id,
        newsTitle: latestNews.title
    });
    localStorage.setItem("articleRead",  JSON.stringify(store));
},

在函数转到详细信息页时调用该函数

    newsDetail: function(key, id) {
    var _this=this;

    newsDetail = API_DATA['getLatestNews'][key];

    myApp.mainView.loadPage('news1.html');
    myApp.onPageInit("news_detail", function(page){
        _this.awardForArticleRead(newsDetail);
        _this.showNewsDetails(newsDetail);
    })       

},

---

没有set add或append函数，但是您可以简单地收集旧数据，将它们合并到代码中，并将新数据替换到本地存储中

大概是这样的：

function addToLocalStorage(nameOfItem, newData){
    var oldData = localStorage.getItem(nameOfItem);
    if(oldData !== null) {
        localStorage.setItem(nameOfItem, oldData + newData);
    } else {
        localStorage.setItem(nameOfItem, newData);
    }
}

---

没有set add或append函数，但是您可以简单地收集旧数据，将它们合并到代码中，并将新数据替换到本地存储中

大概是这样的：

function addToLocalStorage(nameOfItem, newData){
    var oldData = localStorage.getItem(nameOfItem);
    if(oldData !== null) {
        localStorage.setItem(nameOfItem, oldData + newData);
    } else {
        localStorage.setItem(nameOfItem, newData);
    }
}

---

您需要读取旧数据，转换为object（JSON.parse），添加新数据，然后将修改后的数据写入localStorage

awardForArticleRead: function(latestNews){
    var articleData = {};
    articleData['newsId'] = latestNews.news_id;
    articleData['newsTitle'] = latestNews.title;
    localStorage.setItem("articleRead",  JSON.stringify(articleData));
},

awardForArticleRead: function(latestNews){
    var store = JSON.parse(localStorage.getItem("articleRead") || '[]');
    store.push({
        newsId: latestNews.news_id,
        newsTitle: latestNews.title
    });
    localStorage.setItem("articleRead",  JSON.stringify(store));
},

这将产生一个项目数组，如：

[{
    newsId: 1,
    newsTitle: 'title 1'
}, {
    newsId: 2,
    newsTitle: 'title 2'
}, {
    newsId: 3,
    newsTitle: 'title 3'
}]

因此，必须适当地更改读取本地存储的其他代码

或者：

awardForArticleRead: function(latestNews){
    var store = JSON.parse(localStorage.getItem("articleRead") || '{}');
    store[latestNews.news_id] = latestNews.title;
    localStorage.setItem("articleRead",  JSON.stringify(store));
}

将导致数据为：

{ 
    1: 'title1',
    2: 'title2',
    3: 'title3',
}

其中1,2,3是新闻id

---

由于您没有说明如何使用（读取）localStorage数据，因此我无法确定哪个选项更适合您

您需要读取旧数据，转换为object（JSON.parse），添加新数据，然后将修改后的数据写入localStorage

awardForArticleRead: function(latestNews){
    var articleData = {};
    articleData['newsId'] = latestNews.news_id;
    articleData['newsTitle'] = latestNews.title;
    localStorage.setItem("articleRead",  JSON.stringify(articleData));
},

awardForArticleRead: function(latestNews){
    var store = JSON.parse(localStorage.getItem("articleRead") || '[]');
    store.push({
        newsId: latestNews.news_id,
        newsTitle: latestNews.title
    });
    localStorage.setItem("articleRead",  JSON.stringify(store));
},

这将产生一个项目数组，如：

[{
    newsId: 1,
    newsTitle: 'title 1'
}, {
    newsId: 2,
    newsTitle: 'title 2'
}, {
    newsId: 3,
    newsTitle: 'title 3'
}]

因此，必须适当地更改读取本地存储的其他代码

或者：

awardForArticleRead: function(latestNews){
    var store = JSON.parse(localStorage.getItem("articleRead") || '{}');
    store[latestNews.news_id] = latestNews.title;
    localStorage.setItem("articleRead",  JSON.stringify(store));
}

将导致数据为：

{ 
    1: 'title1',
    2: 'title2',
    3: 'title3',
}

其中1,2,3是新闻id

---

由于您没有说明如何使用（读取）localStorage数据，因此我无法确定哪个选项更适合您

我认为您的问题在于您设置的localStorage键是硬编码的，因此每次调用

awardForArticleRead

方法时，它都会覆盖以前的值。当你说你的代码正在替换本地存储数据时，这就是你的意思吗？是的@djfdev为什么我不能保留相同的名称和不同的值？你可以@Santosh-你只需要读取旧值，添加新值，编写修改后的值-但是，你还需要更改存储数据的方式-可能是数组？（当然，您仍然会将其转换为JSON）可能的重复我认为您的问题是您正在设置的localStorage键是硬编码的，因此每次调用

awardForArticleRead

方法时，它都会覆盖以前的值。当你说你的代码正在替换本地存储数据时，这就是你的意思吗？是的@djfdev为什么我不能保留相同的名称和不同的值？你可以@Santosh-你只需要读取旧值，添加新值，编写修改后的值-但是，你还需要更改存储数据的方式-可能是数组？（当然，您仍然会将其转换为JSON）您的第一个解决方案说，

store.push没有定义

，但第二个解决方案工作得很好。第一个方法将失败，因为您当前的localStorage不是数组-如果清除localStorage，您需要以某种方式解释数据类型已更改的事实（或者至少是那个键）然后你会看到代码正常工作第二个正常工作，但是localStorage中的数据不会完全正确，除非你先清除它-正如我所说，任何使用不同“格式”的现有数据在上面的代码中没有说明。第一个解决方案说，

store.push没有定义，但第二个很好地工作。第一个方法将失败，因为您当前的localStorage不是数组-如果您清除localStorage（或至少该键），您需要以某种方式说明数据类型已更改的事实然后您将看到代码正常工作，第二个正常工作，但是localStorage中的数据在您首先清除它之前不会完全正确-正如我所说的，任何使用不同“格式”的现有数据都不会在上面的代码中考虑