CODEWITHSUNDEEP
javascriptlocal-storage
Joh Smith
Joh Smith

Reputation: 641

adding objects to array in localStorage

Ok, I've tried to follow examples here, I know there might be a few different ways of adding objects to an array in localstorage and not overwriting it but I'm failing to find at least one of them.

Got this code to store objects in array but it's overwriting itself. May anyone show me what am I missing? (And I'm afraid I could be missing a lot).

function addEntry() {
    var entryTitle = document.getElementById("entryTitle").value;
    var entryText = document.getElementById("entryText").value;
    var entry = {
        "title": entryTitle,
        "text": entryText
    };
    localStorage.setItem("entry", JSON.stringify(entry));
    var allEntries = [];
    allEntries.push(entry);
    localStorage.setItem("allEntries", JSON.stringify(allEntries));
};

Upvotes: 19

Views: 46648

Answers (5)

Azeem Aslam
Azeem Aslam

Reputation: 544

HTML5 localStorage lets you store key/value pairs of data. Both key and value needs to be a string. To store arrays as a key or value you need to encode the array into a JSON string. And while retrieving you need to decode it back to an array.

const object = {
name: 'ayyan',
age: 29,
number: 03070084689,
};
const arr = JSON.parse(localstorage.getItem('key_name')) || [];
const data = [arr, ...[object]];
localstorage.setitem(JSON.stringify('key', data);

Upvotes: 0

arslan
arslan

Reputation: 1144

const object = {
name: 'ayyan',
age: 29,
number: 03070084689,
};
const arr = JSON.parse(localstorage.getItem('key_name')) || [];
arr.push(object);
localstorage.setItem(JSON.stringify('key_name', arr);

Upvotes: 1

Mahendren Mahisha
Mahendren Mahisha

Reputation: 1062

adding objects to array in localStorage (Ionic):

var existingEntries = JSON.parse(localStorage.getItem("allEntries"));
if(existingEntries == null) existingEntries = [];
var testObject ={username:this.username, 
mobile:this.mobile,
email:this.email,
type:this.type,
password:this.password};

localStorage.setItem('testObject', JSON.stringify(testObject));
existingEntries.push(testObject);
localStorage.setItem("allEntries", JSON.stringify(existingEntries));

Upvotes: 2

David Hellsing
David Hellsing

Reputation: 108480

Maybe you just need to fetch the entries before pushing the new one:

var allEntries = JSON.parse(localStorage.getItem("allEntries")) || [];
allEntries.push(entry); 
//etc...

Upvotes: 13

CodingIntrigue
CodingIntrigue

Reputation: 78525

When you use setItem it overwrites the item which was there before it. You need to use getItem to retrieve the old list, append to it, then save it back to localStorage:

function addEntry() {
    // Parse any JSON previously stored in allEntries
    var existingEntries = JSON.parse(localStorage.getItem("allEntries"));
    if(existingEntries == null) existingEntries = [];
    var entryTitle = document.getElementById("entryTitle").value;
    var entryText = document.getElementById("entryText").value;
    var entry = {
        "title": entryTitle,
        "text": entryText
    };
    localStorage.setItem("entry", JSON.stringify(entry));
    // Save allEntries back to local storage
    existingEntries.push(entry);
    localStorage.setItem("allEntries", JSON.stringify(existingEntries));
};

Here is a fiddle which demonstrates the above.

Upvotes: 46

Related Questions