Kann nicht Info von Localstorage erhalten - JavaScript

Question

Ich lerne Local Storage in JavaScript zu verwenden, also habe ich eine Anwendung, um etwas Übung zu bekommen. Wenn ich den Code lief es gab mir diesen Fehler:

ich die HTML und CSS auf einem codepen setzen, hier ist der Link: Link To Code

JavaScript-Code

// READY 
$(document).ready(() => { 
    // when user clicks on submit 
    $(".submit").on("click", addItem); 

    // show bookmarks 
    showBookmarks(); 
}) 

// ADD ITEM 
let addItem = (e) => { 
    // get values from inputs 
    let name = $(".name").val(); 
    let link = $(".url").val(); 

    // stores bookmarks 
    let bookmark = { 
     name: name, 
     url: link 
    }; 

    // bookmark varification 
    // if theres nothing in bookmarks 
    if(localStorage.getItem("bookmarks") == null) { 
     // init array 
     let bookmarks = []; 
     // add to array 
     bookmarks.push(bookmark); 
     // set to local storage 
     localStorage.setItem("bookmarks", JSON.stringify(bookmarks)); 
    } else { // if theres something in bookmarks 
     // get from local storage 
     let bookmarks = JSON.parse(localStorage.getItem("bookmarks")); 
     // add bookmark to array 
     bookmarks.push(bookmark); 
     // reset back to local storage 
     localStorage.setItem("bookmarks", JSON.stringify(bookmarks)); 
    } 

    // prevent form from submitting 
    e.preventDefault(); 
} 

// SHOW BOOKMARKS 
let showBookmarks =() => { 
    // get from local storage 
    let bookmarks = JSON.parse(localStorage.getItem("bookmarks")); 

    // loop through local storage data 
    for(let i = 0; i < bookmarks.length; i++) { 
     let name = bookmarks.name[i]; 
     let url = bookmarks.url[i]; 

     // append bookmarks 
     $(".show").append(` 
      <div class="bookmarks-container"> 
       <div class="bookmark"> 
        <a href="${url}" target="_blank">${name}</a> 
        <i class="fa fa-trash fa-lg" aria-hidden="true"></i> 
       </div> 
      </div> 
     `); 
    } 
} 

// DELETE ITEM 

Answer 1

ich es herausgefunden. Ich hatte zu ändern:

for(let i = 0; i < bookmarks.length; i++) { 
     let name = bookmarks.name[i]; 
     let url = bookmarks.url[i]; 

zu:

for(let i = 0; i < bookmarks.length; i++) { 
     let name = bookmarks[i].name; 
     let url = bookmarks[i].url; 

Das ist, weil ich durch name Radfahren wurde und url, aber ich bin mit dem Browser zu Beginn meines for-Schleife Zyklus sage durch bookmarks .

Answer 2

Sie rufen die showBookmarks-Methode beim Laden auf, die dann versucht, die localStorage "Lesezeichen" Element zu analysieren. Dieser Wert ist nicht definiert, wenn versucht wird, ihn zu durchlaufen, undefiniert hat keine Länge.

if(!bookmarks){ 
     return; 
    } 

Here is the example working

Answer 3

Try this:

let bookmarks = localStorage.getItem("bookmarks") !== null ? JSON.parse(localStorage.getItem("bookmarks")) : [];