Wyświetlanie danych z localStorage po odświeżeniu strony

Witajcie,

Po kliknięciu addProductBtn zapisuje dane z inputów do localStorage i następnie wyświetlam je w wybranej kategorii. Problem polega na tym, że dopiero po kliknięciu addProductBtn wyświetlają się wszystkie zapisane w localStorage dane, a chcę aby nie znikały po odświeżeniu strony. Próbowałam zrobić to takim zapisem na końcu skryptu, ale niestety nie działa.

 $(window).on("load", renderProduct, false);

Dodatkowo za każdym kazem dodaje mi od nowa wszystkie produkty, które już były wcześniej dodane.. Poniżej kod js:

$(function () {

  const newProductName = $('.new-product-name');
  const newProductAmt = $('.new-product-amt');
  const addProductBtn = $('.new-product-add');
  const categorySelected = $('#category-select');

  // Local Storage
  const product = {
    category: "",
    name: "",
    amount: ""
  };

  // save date in JSON
  function saveProductToLocalStorage(newObject) {
    let dataFromLocalStorage = [];
    if (localStorage.getItem("products") != null) {
      dataFromLocalStorage = JSON.parse(localStorage.getItem("products"));
      dataFromLocalStorage.push(newObject);
      localStorage.setItem("products", JSON.stringify(dataFromLocalStorage));
    } else {
      dataFromLocalStorage.push(newObject);
      localStorage.setItem("products", JSON.stringify(dataFromLocalStorage));
    }
  }

  // save new product in localStorage
  if (addProductBtn) {
    addProductBtn.on('click', function (e) {
      e.preventDefault();
      if (newProductName.val() != "" && newProductAmt.val() >= 1 && categorySelected.val() != "") {
        product.name = newProductName.val();
        product.amount = newProductAmt.val();
        product.category = categorySelected.val();
        saveProductToLocalStorage(product);
        console.log("Zapisano", product);

        // take date from localStorage
        function renderProduct() {
          let allProducts = JSON.parse(localStorage.getItem("products"));

          allProducts.forEach(function (singleProduct) {
            // create new product with delete option
            const newProduct = $('<div class="new-product"></div>');
            newProduct.html(singleProduct.name);
            const delProduct = $('<i class="fas fa-trash-alt"></i>');
            delProduct.on('click', function () {
              $(this).parent().remove()
            });
            newProduct.append(delProduct);
            // add this product to the selected category
            if (singleProduct.category == "veg") {
              $('.vege-category').append(newProduct);
            } else if (singleProduct.category == "fruits") {
              $('.fruits-category').append(newProduct);
            } else if (singleProduct.category == "dairy") {
              $('.dairy-category').append(newProduct);
            }
            //clean the inputs
            newProductName.val("");
            newProductAmt.val("");
          });
        }
        renderProduct();
      }
    });
  }
  $(window).on("load", renderProduct, false);

});

Będę wdzięczna za każdą pomoc. :)

A jak wywalisz ten handler false?

Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault(). A false value can also be passed for the handler as a shorthand for function(){ return false; }. So, $( "a.disabled" ).on( "click", false ); attaches an event handler to all links with class "disabled" that prevents them from being followed when they are clicked and also stops the event from bubbling.

PS. Przy pierwszym wejsciu w localStorage nie bedzie takiego itemu. Pewnie chcesz wyifowac tego undefined, ktore tam bedzie

Edit: w tym scope'ie przeciez nie ma renderProduct bo to jest zagniezdzone w ifa itd. Jakbys sprawdzila konsole to jak byk Ci pewnie mowi, ze nie ma takiej funkcji

stivens napisał(a):

A jak wywalisz ten handler false?

Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault(). A false value can also be passed for the handler as a shorthand for function(){ return false; }. So, $( "a.disabled" ).on( "click", false ); attaches an event handler to all links with class "disabled" that prevents them from being followed when they are clicked and also stops the event from bubbling.

PS. Przy pierwszym wejsciu w localStorage nie bedzie takiego itemu. Pewnie chcesz wyifowac tego undefined, ktore tam bedzie

Edit: w tym scope'ie przeciez nie ma renderProduct bo to jest zagniezdzone w ifa itd. Jakbys sprawdzila konsole to jak byk Ci pewnie mowi, ze nie ma takiej funkcji

Tak, masz rację pokazuje w konsoli, że nie ma takiej funkcji. Przed wrzucaeniem kodu tutaj próbowałam to umieścić wszędzie, ale niestety nic to nie zmienia. Usunięcie false też niestety nie pomaga. :(

Deklaracja renderProduct powinna byc conajwyzej tak zagniezdzona jak jej wywolanie

stivens napisał(a):

Deklaracja renderProduct powinna byc conajwyzej tak zagniezdzona jak jej wywolanie

Umieściłam jak poniżej. Niestety również nie powoduje to pokazania produktów od razu po odświeżeniu strony. Z false i bez.

 });
        }
        renderProduct();
        $(window).on("load", renderProduct);
      }
    });
  }

});

A wiesz może co zrobiłam źle, że przy każdym kliknięciu guzika dodają mi się od nowa zdublowane produkty?

Ale teraz zamiast wyniesc funkcje wyzej, do np. scope'a wewnatrz (function(){}) to Ty zagniezdzilas bindowanie glebiej. Nie tedy droga :P