CODEWITHSUNDEEP
javascripthtml
Animimo
Animimo

Reputation: 53

Appending Value to LocalStorage

I want to add new values to localStorage for my Pizza website in which I want the admin to be able to add pizzas. I have this code:

function store() {
  var inputName = document.getElementById("name");
  localStorage.setItem("name", inputName.value);

  var inputDescription = document.getElementById("description");
  localStorage.setItem("description", inputDescription.value);

  var inputPrice = document.getElementById("price");
  localStorage.setItem("price", inputPrice.value);
}
<form onsubmit="store()" id="form1">
  <label for="name">Namn:</label><br>
  <input class="name" type="text" id="name" name="name" placeholder="Skriv här..."><br>

  <label for="description">Beskrivning:</label><br>
  <input class="description" type="text" id="description" name="description" placeholder="Skriv här...">
  <br>

  <label for="price">Pris:</label><br>
  <input class="margin-bot" type="text" id="price" name="price" placeholder="Skriv här...">
  <br>

  <br>
  <button form="form1" class="submit-button" type="submit">Lägg Till</button>
</form>

How do I add new pizzas for each time? Everytime I try to add a new value it just replaces the existing one.

Upvotes: 0

Views: 75

Answers (5)

javascwipt
javascwipt

Reputation: 1178

You need to store the pizzas the user has created in an array. You can store the array in local storage, you just need to make sure you can serialize and deserialize it properly

Take the values from the input field

Grab your array of pizzas from local storage If the array doesn't exist yet, getItem will return null, so you can give it an array to start off with.

Add the new pizza to the array

Save the pizzas array in local storage again.

function store() {
  var newPizza = {
    name: inputName.value,
    description: inputDescription.value,
    price: inputPrice.value
  }
  var pizzas = localStorage.getItem('pizzas')
  if (!pizzas) {
    pizzas = []
  } else {
    pizzas = JSON.parse(pizzas)
  }
  pizzas.push(newPizza)
  localStorage.setItem('pizzas', JSON.stringify(pizzas))
}

Upvotes: 1

sonEtLumiere
sonEtLumiere

Reputation: 4572

You can create an array to store many pizzas and to check if already exists you can call the getStorage() function and if storagePizzas includes your new pizza then update the value

arrayOfPizzas = []

function storeArray() {
  let pizzaCreated = {}

  pizzaCreated.name = document.getElementById("name").value;
  pizzaCreated.description = document.getElementById("description").value;
  pizzaCreated.price = document.getElementById("price").value;

  let storageItems = getStorage();
  // Check ...
  arrayOfPizzas.push(pizzaCreated);
  setStorage(arrayOfPizzas);

}

function setStorage(arr){
  localStorage.setItem('arrayOfPizzas', JSON.stringify(arr));
}

function getStorage(){
  return JSON.parse(localStorage.getItem('arrayOfPizzas');
}

Upvotes: 1

Yunus Emre Bayazit
Yunus Emre Bayazit

Reputation: 53

You can keep it as json array in local storage.For Example;

function addStoreForArray(key, value) {
    var storeArrayObj = localStorage.getItem(key);
    if(storeArrayObj){
        storeArrayObj = JSON.parse(storeArrayObj);
        storeArrayObj.push(value);
    } else {
        storeArrayObj = [];
        storeArrayObj.push(value);
    }
    localStorage.setItem(key, JSON.stringify(storeArrayObj));
}

addStoreForArray('pizzas', {name:'pizzaName', description: 'pizzaDescription', price: 10});

Upvotes: 1

Nikhil Singh
Nikhil Singh

Reputation: 1610

    function store() {
        let inputName = document.getElementById("name");
        let inputDescription = document.getElementById("description");
        let inputPrice = document.getElementById("price");

        let pizzas = []

        if(localStorage.getItem("pizzas")){
            pizzas = JSON.parse(localStorage.getItem("pizzas"));
        }

        let pizza = {}
        pizza.name = inputName.value;
        pizza.description = inputDescription.value;
        pizza.price = inputPrice.value;
        pizzas.push(pizza)
        localStorage.setItem("pizzas", JSON.stringify(pizzas))
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form onsubmit="store()" id="form1">
    <label for="name">Namn:</label><br>
    <input class="name" type="text" id="name" name="name" placeholder="Skriv här..."><br>

    <label for="description">Beskrivning:</label><br>
    <input class="description" type="text" id="description" name="description" placeholder="Skriv här...">
    <br>

    <label for="price">Pris:</label><br>
    <input class="margin-bot" type="text" id="price" name="price" placeholder="Skriv här...">
    <br>

    <br>
    <button form="form1" class="submit-button" type="submit">Lägg Till</button>
</form>

</body>
</html>

This should help, first I check the localStorage some pizza is already stored in there or not, if there, then I take that parse it and add one more pizza to it from the form input, if not I create a completely new array and then add the value from the form input then store it in the localStorage.

Upvotes: 1

sohaieb azaiez
sohaieb azaiez

Reputation: 780

first it would be better to replace your code to use "objects & arrays" instead of "string variables", like this example i made for you:

function store() {
var inputName = document.getElementById("name");
var inputDescription = document.getElementById("description");
var inputPrice = document.getElementById("price");

return ({
   name: inputName.value,
   description: inputDescription.value,
   price: inputPrice.value
 });
}

function updateStore(key = 'pizzas'){
   let pizzasArray = JSON.parse(localStorage.get(key)) || [];
   pizzasArray.push(store());
   localStorage.setItem(key, JSON.stringify(pizzasArray));
}

Upvotes: 1

Related Questions