Storing items in an array within the local storage

Question

Storing items in an array within the local storage

I have been experimenting with different ways to add objects to an array in localstorage without overwriting it, but I haven't found a successful solution yet.

My current code stores objects in an array, but it keeps overwriting itself. Can someone please help me identify what I am missing? (I have a feeling it could be quite 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));
};

javascript local-storage

Answer 1

Answer №1

Whenever you utilize the setItem method, it will replace the existing item with the new one. To access the previous list, you should use the getItem method, add new content to it, and then update it in localStorage:

function addEntry() {
    // Retrieve any previously saved JSON data from 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));
    // Update allEntries in local storage
    existingEntries.push(entry);
    localStorage.setItem("allEntries", JSON.stringify(existingEntries));
};

For a visual demonstration of the process, check out this fiddle.

Answer 2

Whenever you utilize the setItem method, it will replace the existing item with the new one. To access the previous list, you should use the getItem method, add new content to it, and then update it in localStorage:

function addEntry() {
    // Retrieve any previously saved JSON data from 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));
    // Update allEntries in local storage
    existingEntries.push(entry);
    localStorage.setItem("allEntries", JSON.stringify(existingEntries));
};

For a visual demonstration of the process, check out this fiddle.

Answer 3

Answer №2

Perhaps fetching the existing entries before adding a new one could solve the issue:

let currentEntries = JSON.parse(localStorage.getItem("currentEntries")) || [];
currentEntries.push(newEntry); 
//continue with the rest of the code...

Answer 4

Perhaps fetching the existing entries before adding a new one could solve the issue:

let currentEntries = JSON.parse(localStorage.getItem("currentEntries")) || [];
currentEntries.push(newEntry); 
//continue with the rest of the code...

Answer 5

Answer №3

How to Add Objects to an Array in localStorage using Ionic:

var existingEntries = JSON.parse(localStorage.getItem("allEntries"));
if(existingEntries == null) existingEntries = [];
var newObject ={name:this.name, 
age:this.age,
city:this.city,
country:this.country,
occupation:this.occupation};

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

Answer 6

How to Add Objects to an Array in localStorage using Ionic:

var existingEntries = JSON.parse(localStorage.getItem("allEntries"));
if(existingEntries == null) existingEntries = [];
var newObject ={name:this.name, 
age:this.age,
city:this.city,
country:this.country,
occupation:this.occupation};

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

Answer 7

Answer №4

let person = {
name: 'John',
age: 35,
number: 123456789,
};
let data = JSON.parse(localStorage.getItem('data_key')) || [];
data.push(person);
localStorage.setItem('data_key', JSON.stringify(data));

Answer 8

let person = {
name: 'John',
age: 35,
number: 123456789,
};
let data = JSON.parse(localStorage.getItem('data_key')) || [];
data.push(person);
localStorage.setItem('data_key', JSON.stringify(data));

Answer 9

Answer №5

Storing data in HTML5 localStorage involves saving key/value pairs, where both the key and value must be strings. If you want to store arrays as keys or values, you will need to encode the array into a JSON string before saving it. When retrieving the data, you'll then need to decode the JSON string back into 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);

Answer 10

Storing data in HTML5 localStorage involves saving key/value pairs, where both the key and value must be strings. If you want to store arrays as keys or values, you will need to encode the array into a JSON string before saving it. When retrieving the data, you'll then need to decode the JSON string back into 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);

Storing items in an array within the local storage

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is causing the width discrepancy in my header section on mobile devices?

Creating a dynamic configuration for service instantiation in Angular 4/5

Complete a submission using an anchor (<a>) tag containing a specified value in ASP.Net MVC by utilizing Html.BeginForm

`Localhost JSON parsing works fine, but encounters issues on the server``

Activate loading state when input changes with VueJS and Vuetify by using @change attribute and setting loading="true"

AngularFire Google OAuth failing to retrieve the user's email address

Choosing the Best Websocket Libraries for Spring Boot and Angular Communication

When adding the input text value to the <canvas>, the output of .appendTo('<p>' + value + '</p>') is not being shown

Move the option from one box to another in jQuery and retain its value

"Learn how to implement a dropdown menu using Vue.js and Quasar on Cloud Firebase

Plugin for webpack that replaces a specified function with an alternative one

Transform the usual button into a jQuery button that requires a press and hold action

Tips for incorporating your personal touch while utilizing Snipcart

What is a method to omit elements within a nested child element from a selection without relying on the children() function

Grunt encountered a critical issue: an undefined function was called

What is the best way to run a scheduled task automatically using node-cron?

When splitting a string containing multiple integer values using the delimiter ".", the function in Javascript may return inaccurate results

A handy Vue.js function

Having performance issues with an HTML5/JavaScript game on Internet Explorer 8

Issues detected with the functionality of Angular HttpInterceptor in conjunction with forkJoin