Второй параметр localStorage не принимает input.value

Question

Я использую localStorage для хранения нескольких значений, но он не работает для моих входных данных, которые, как я подтвердил, являются строками. это работает для жестко закодированных строк, таких как «курица», но не для input.value вот мой код: https://codepen.io/levinson2504/pen/gObzZON?editors=0011

let menu = [];

      const menuDiv = document.querySelector("#menu");
      const inputName = document.querySelector("#item-name");
      const inputPrice = document.querySelector("#item-price");

      document.querySelector("#add-btn").addEventListener("click", addItem);
      document.querySelector("#del-btn").addEventListener("click", () => delItem(menu.length - 1));

  function render(items) {
        menuDiv.innerHTML = "";
        [inputName, inputPrice].forEach(input => input.value = "");
        items.forEach((item, index) => menuDiv.append(menuElement(item, index)));
      }

      function menuElement(item, index) {
        const menuText = document.createElement("span");
        menuText.innerText = `${item.itemName}   -   ${item.itemPrice}`;

        const delBtn = document.createElement("button");
        delBtn.innerText = "delete item";
        delBtn.addEventListener("click", () => delItem(index));

        const itemDiv = document.createElement("div");
        [menuText, delBtn].forEach(el => itemDiv.append(el));

        return itemDiv;
      }

 function delItem(index) {
        menu.splice(index, 1);
        render(menu);
      }

  function addItem() {
        menu.push({
          itemName: inputName.value, 
          itemPrice: inputPrice.value
          });
        render(menu);
        let item = "chicken"
        localStorage.setItem("itemName", item);
        localStorage.setItem("itemPrice", inputPrice.value );
        console.log(localStorage.getItem("itemName"));
        console.log(localStorage.getItem("itemPrice"));
      }

Answer 1

Ваш метод render очищает введенные вами значения. Поскольку вы вызываете render перед установкой значения в localStorage, вы просто получите пустое значение. Сохраните значение в localStorage перед вызовом render:

function addItem() {
  menu.push({
    itemName: inputName.value, 
    itemPrice: inputPrice.value
  });

  let item = "chicken"
  localStorage.setItem("itemName", item);
  localStorage.setItem("itemPrice", inputPrice.value);
  console.log(localStorage.getItem("itemName"));
  console.log(localStorage.getItem("itemPrice"));

  render(menu);
}

Answer 2

Проверьте, является ли inputPrice.value строковым или нет, так как setItem принимает строковые значения. Попробуйте использовать inputPrice.value.toString () / String (inputPrice.value)