dodanie danych z localStorage na inną stronę

Cześć, tworzę aplikację do dodawania przepisów. Na jednej ze stron (new_recipe.html) znajdują się pola do uzupełnienia (title, ingredients, preparation), z których pobieram dane do localStorage, a na innej stronie (recipes_list.html) chcę wyświetlić tytuły dodanych przepisów jako dzieci elementu recipesList, po kliknięciu przycisku showRecipesListBtn z pliku new_recipe.html. Napisałam kod jak poniżej, ale niestety nie działa. Będę wdzięczna za informację co powinnam poprawić.
Od razu zaznaczam, że jestem początkująca, więc będę wdzięczna za wyrozumiałość. ;)
Część kodu z pliku js, dołączonego do obu plików html:

    // wyświetlenie przepisów z localStorage 
    function renderRecipesList() {
        let allRecipes = JSON.parse(localStorage.getItem("recipes"));

        allRecipes.forEach(function (singleRecipe) {
            let newTitle = document.createElement("li");
            newTitle.innerHTML = singleRecipe.title;
            recipesList.appendChild(newTitle);
        });
    }

    showRecipesListBtn.addEventListener("click", renderRecipesList);

Z góry bardzo dziękuję za pomoc.

Napisałam kod jak poniżej, ale niestety nie działa.

Co to znaczy "nie działa"? Coś się pokazuje na ekranie? Co pokazuje konsola błędów w przeglądarce?

Konsola wypisuje błąd, który dotyczy przycisku służącego do zapisania przepisu do localStorage, ponieważ znajduje się on tylko na stronie new_recipe.html, a przy załadowaniu szuka go też na stronie swow_recipe.html, na której go nie ma. Jest to właśnie oddzielny problem, z którym się zmagam. Czy to on blokuje działanie funkcji?

Uncaught TypeError: Cannot read property 'addEventListener' of null
at HTMLDocument.<anonymous> (new_recipe.js:112)
(anonymous) @ new_recipe.js:112

Podajesz kod do czegoś innego, masz problem z jeszcze czymś innym - zdecyduj się ;o

<button onclick="myFunction()">Click me</button>

Użyj tego zamiast listenera lub zanim podepniesz listener to sprawdzaj czy button istnieje

Sprawdzenie czy button istnieje rozwiązało ten problem, bardzo dziękuję! :)

Rzeczywiście trochę namieszałam. :P Natomiast wyświetlanie listy przepisów na innej stronie niestety dalej nie działa i konsola nie wypisuje mi błędów. Po kliknięciu przenosi mnie tylko na tę stronę, ale bez wyświetlonej listy przepisów.

Do kodu obsługującego kliknięcie buttona showRecipesListBtn również dopisałam warunek:

    // wyświetlenie przepisów z localStorage 
    function renderRecipesList() {
        let allRecipes = JSON.parse(localStorage.getItem("recipes"));

        allRecipes.forEach(function (singleRecipe) {
            let newTitle = document.createElement("li");
            newTitle.innerHTML = singleRecipe.title;
            snackRecipesList.appendChild(newTitle);
        });
    }

   ** if (showRecipesListBtn) {
        showRecipesListBtn.addEventListener("click", renderRecipesList);
    }**

Button showRecipesListBtn w new_recipe.html wygląda tak:

        <div>
            <a href="snack_recipes.html" id="show-recipes-btn"><strong>Pokaż listę przepisów</strong></a>
        </div>

Daj console.log na allRecipes i snackRecipesList

Jeśli pierwszy log bedzie pusty, to znaczy ze nie znajduje wartości w localstorage, natomiast kolejny powinien zwrocic element do dopisywania przepisow - odpowie nam to na pytanie czy go znajduje.

Atrybut href przenosi Cie do innej podstrony, wiec zachowanie bedzie inne niz tego oczekujesz. Zmien jego wartosc na #. A jeszcze lepiej korzystaj z <button>

Nie wiem tez czy mozna tak sobie iterowac po jsonie, ale to pozniej

Tablicę obiektów z localStorage consola wypisuje, a przy snackRecipesList zwraca null.

    function renderRecipesList() {
        let allRecipes = JSON.parse(localStorage.getItem("recipes"));

        // allRecipes.forEach(function (singleRecipe) {
        //     let newTitle = document.createElement("li");
        //     newTitle.innerHTML = singleRecipe.title;
        //     snackRecipesList.appendChild(newTitle);
        // });
        console.log(allRecipes);
        console.log(snackRecipesList);
    }

    if (showRecipesListBtn) {
        showRecipesListBtn.addEventListener("click", renderRecipesList);
    }

Tak, wiem, że link przenosi na inną stronę, tylko właśnie to chciałam osiągnąć. Stąd link, a nie button. Rozumiem, że nie jest możliwe dodanie danych z localStorage na inną stronę i od razu przeniesienie na nią?

mozna to osiagnac przy uzyciu document.ready/on load

.__. napisał(a):

mozna to osiagnac przy uzyciu document.ready/on load

Dzięki wielkie za pomoc! :)