Encountering issues when attempting to store input values in an array within local storage

Question

Encountering issues when attempting to store input values in an array within local storage

Currently, I am working on a project where I need to store a value from an input field in an array that is stored in local storage. While I have made progress based on previous questions here, I seem to be facing some issues. After entering some data, I used console.log to check if my array is being populated but it shows nested arrays in the console which I am finding difficult to manage.

This is my JavaScript code:

names = [];
names.push(JSON.parse(localStorage.getItem('locname')));
localStorage.setItem('locname', JSON.stringify(names));

function saveData(data) {

  names = [];
  var data = document.getElementById("locationName").value;
  names = JSON.parse(localStorage.getItem('locname'));
  names.push(data);
  alert(names);
  localStorage.setItem('locname', JSON.stringify(names));
}

console.log(names);

In my HTML file, I have an input field with id=locationName and a button with onclick=saveData().

Can anyone point me towards what might be going wrong here?

javascript arrays json local-storage

Answer 1

Answer №1

To utilize local storage in your web application, you can consider implementing the following code snippet:

// Retrieve stored value or initialize empty array.
// Previously, you were increasing the depth of the data structure
// every time by adding another array to "names".
var names = JSON.parse(localStorage.getItem('locname') || "[]");

function saveData(data) {
  var data = document.getElementById("locationName").value;
  names.push(data);
  localStorage.setItem('locname', JSON.stringify(names));
}

Discover a live demonstration on JSFiddle (use developer tools to examine local storage content).

Answer 2

To utilize local storage in your web application, you can consider implementing the following code snippet:

// Retrieve stored value or initialize empty array.
// Previously, you were increasing the depth of the data structure
// every time by adding another array to "names".
var names = JSON.parse(localStorage.getItem('locname') || "[]");

function saveData(data) {
  var data = document.getElementById("locationName").value;
  names.push(data);
  localStorage.setItem('locname', JSON.stringify(names));
}

Discover a live demonstration on JSFiddle (use developer tools to examine local storage content).

Answer 3

Answer №2

The issue arises when you store the retrieved array in your existing names array from local storage.

Here's a modification:

var names = []; // It is recommended to declare variables before using them
if (localStorage.getItem('locname')) {
    names = JSON.parse(localStorage.getItem('locname'));
}

Answer 4

The issue arises when you store the retrieved array in your existing names array from local storage.

Here's a modification:

var names = []; // It is recommended to declare variables before using them
if (localStorage.getItem('locname')) {
    names = JSON.parse(localStorage.getItem('locname'));
}

Encountering issues when attempting to store input values in an array within local storage

Answer №1

Answer №2

Similar questions

Having trouble assigning a value to a dropdown selection with JQuery

What is the best way to propagate a react component's props to options following an apollo-client mutation?

Is it possible to determine whether a path leads to a directory or a file?

What could be the reason for Firefox abruptly terminating inactive XMLHttpRequest connections?

Steps for adding a delete function to an array object

Filter a Vue table by column name with specific conditions

Leverage the power of jQuery to fetch data from a PHP script connected to a MySQL database

Issues with utilizing destructuring on props within React JS storybooks

Converting XML to JSON using Java POJO with the help of Jackson library

The functionality of the State Params is not functioning as expected

Having trouble with the performance of a kendo UI treeview connected to a JSON

Evaluating QUnit Test Cases

Using MySQL with Node.js for JSON parsing techniques

Trouble in testing: ComponentDidMount is mysteriously bypassed by Jest/Enzyme when it's supposed to be triggered

Experiencing difficulty with writing Array values to memory

Find the value of the nearest input field using jQuery

HTML FORMS - Transmitting data to multiple forms simultaneously within a single webpage

jQuery .click() only triggering upon page load

How to extract data from URLs in Angular

Tips for referencing a string in JavaScript