Javascript:how do I get local storage from user input?

Question

0.00/5 (No votes)

See more:

I set the local storage of the user input, but the problem I am having is getting the information when the user clicks on the edit button.

The outcome should be when the user clicks the edit button the existing information should appear in the modal for the user to update the new information.

Please see the code below:

HTML

<pre><div class="budget-update"></div>
      <div class="modal" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Want to make changes?</h5>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div class="modal-body">
              <form class="budget-update">
                <select
                  id="cashflow-update"
                  name="income/expense"
                  class="income/expense"
                >
                  <option class="options-update" value="income">Income</option>
                  <option class="options-update" value="expense">
                    Expense
                  </option>
                </select>
                <select
                  class="catagory-update"
                  name="Catagory"
                  value="Catagory"
                >
                  <option class="options-update" value="House Hold">
                    House Hold
                  </option>
                  <option class="options-update" value="Car">Car</option>
                  <option class="options-update" value="entertainment">
                    Entertainment
                  </option>
                  <option class="options-update" value="investments">
                    Investments
                  </option>
                  <option class="options-update" value="business">
                    Business
                  </option>
                  <option class="options-update" value="savings">
                    Savings
                  </option>
                </select>
                <input
                  class="label-update"
                  type="text"
                  placeholder="Example rent"
                />
                <input class="number-update" type="number" placeholder="0,0" />
              </form>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                Close
              </button>
              <button type="button" class="btn btn-primary save">
                <img src="/resources/Images/Save-icon.png" alt="Save Icon" />
              </button>
            </div>
          </div>
        </div>
      </div>

JavaScript

/*----Variable Objects----*/
const el = {
  list: document.querySelector(".list"),
  cashflow: document.querySelector("#cashflow"),
  catagory: document.querySelector(".catagory"),
  label: document.querySelector(".label"),
  number: document.querySelector(".number"),
  modal:document.querySelector(".modal"),
};

let budgetArray = JSON.parse(window.localStorage.getItem(BUDGETLIST_KEY) ?? "[]")
<pre>/*----Budget list Object----*/

function makeNewBudget(){
  const data = {
    id: createId(),
    cashflowNew: el.cashflow.value,
    catagoryNew: el.catagory.value,
    labelNew: el.label.value,
    dateNew: createdDate(),
    numberNew: el.number.value,
  };
  return data;
}

/*----Render Budget List----*/
function renderList(){

  window.localStorage.getItem(BUDGETLIST_KEY)

el.list.innerHTML = budgetArray.map(function (data,i) {

  return `<div class="entry">
  <div class="list">
    <button onclick="deleteItem(event, ${i})" class="Archive" data-id="${data.id}">
          <img src="../resources/Images/archive.png" alt="Archive">
      </button>
      <button onclick="editItem(event, ${i})" class = "edit" data-id="${data.id}" class = "edit" data-id="${data.id}">
          <img src="../resources/Images/edit.png" alt="Edit">
      </button>

      <div class="input" data-id="${data.id}"></div>
      <label class="dateNew">${data.dateNew}</label>
      <label class="cashflowNew">${data.cashflowNew}</label>
      <label class="catagoryNew">${data.catagoryNew}</label>
      <label class="labelNew">${data.labelNew}</label>
      <label class="numberNew">${data.numberNew}</label>
  </div>
</div>`
;
});

el.label.value="";
el.number.value="";

}



<pre>/*----form validation----*/
let budgetButton = document.querySelector(".budget-button");

let label = document.querySelector(".label");
let num = document.querySelector(".number");

budgetButton.addEventListener("click", () => {

  if (!label.value || !num.value) {
    alert("please make sure all inputs are filled");
  }
  
  budgetArray.push(makeNewBudget())

  renderList();

  storedEntry();
  
  inputSorage();
});

/*----User Input Storage----*/
function inputSorage(){
  window.localStorage.setItem(USERINPUT_KEY,JSON.stringify(budgetArray))
}

What I have tried:

This is what I have done to get the local storage of the user input, but does not seem to work when I get to click on the edit button

JavaScript

/*----Edit budget Entry----*/
function editItem(){
modal.style.display = "block";

window.localStorage.getItem(USERINPUT_KEY);
}

Posted 27-Jul-22 16:11pm

sheldon aldridge

Updated 28-Jul-22 1:06am

v2

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Answer 1 · 2022-07-27T22:40:00

Well, foremost your editItem method doesn't seem to take in any parameters which contradicts the onclick attribute in the HTML. Did you mean for the method to look like this:

JavaScript

function editItem(event, index) {

That's better, now you have the index of the item that you want to edit. Remember that window.localStorage.getItem() returns a string value, it doesn't automagically do anything else. You need to take the content and parse it back into an array:

JavaScript

const json = window.localStorage.getItem(USERINPUT_KEY);
const array = JSON.parse(json);

Now you have the array and the index, you can access the individual item using the index, and do something with the result. Bear in mind you haven't provided us with the HTML for the form used to add/edit entries, so that part is down to you.

Javascript:how do I get local storage from user input?

1 solution

Solution 1

Add your solution here

Preview 0

Javascript:how do I get local storage from user input?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us