Append new data in object array on click

Question

There is a list of news article in a page. Everytime user clicks on it, it saves news id and title to localstorage. My code is replacing localstorage data everytime I click new item.

How do I append new data into localStorage ?

Setting localStorage

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

calling function while it goes to detail page

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

},

Possible duplicate of [How to append to HTML5 localStorage?](https://stackoverflow.com/questions/7679955/how-to-append-to-html5-localstorage) — Dana, May 30 '17 at 23:58
I think your problem is that the localStorage key you are setting is hardcoded, so every time you call the `awardForArticleRead` method, it overwrites the previous value. Is that what you meant when you said your code is replacing localStorage data? — djfdev, May 31 '17 at 00:00
yes @djfdev Why I can't keep the same name and different value ? — Santosh, May 31 '17 at 00:00
you can @Santosh - you just need to read the old value, add the new value, write the amended value - however, you'll need to also change how you store the data - perhaps an array? (which you would still convert to/from JSON of course) — Jaromanda X, May 31 '17 at 00:01

score 1 · Answer 1 · answered May 31 '17 at 00:03

There is no set add or append function, however you can simply gather the old data, combine them in the code and replace the new data into local storage.

Something like this:

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

score 1 · Accepted Answer · answered May 31 '17 at 00:09

You need to read the old data, convert to object (JSON.parse), add the new data, then write the amended data to localStorage

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

this would result in an array of items, like:

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

so other code that reads the localStorage would have to be changed appropriately

Alternatively:

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

would result in the data being:

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

where 1,2,3 are the news_id's

As you have not shown how the localStorage data is used (read) then I can't really say which is the better option for you

your first solution says `store.push is not defined` but second one work perfectly. — Santosh, May 31 '17 at 00:16
the first method will fail because your current localStorage is **not** an Array - you'd need to somehow account for the fact that the type of data has changed - if you clear out localStorage (or at least that key) then you'll see the code works just fine — Jaromanda X, May 31 '17 at 00:20
the second works fine, but the data in localStorage won't be exactly right until you clear it first - as I said, any existing data using a different "format" is not accounted for in the code above — Jaromanda X, May 31 '17 at 00:21

Append new data in object array on click

2 Answers2