Question

当前正在使用将数据保存到本地存储的书签管理器，然后将存储的数据从本地存储附加到DOM，但是mean24不会将代码附加到DOM。

请在下面找到我尝试过的内容：

fetchUrl()

document.getElementById('subButton').addEventListener('click',storeFormInput)

var bookmarks= []

function storeFormInput(e){
    e.preventDefault()
    //get input values
    var nameInput = document.getElementById('name').value;
    var urlInput = document.getElementById('url').value;

 
//create a bookmark object
let bookmark = {
    name: nameInput,
    url: urlInput
}
// store bookmark in bookmarks array
bookmarks.push(bookmark);
 localStorage.setItem('bookmarksKey',JSON.stringify(bookmarks));
 fetchUrl()
}

function fetchUrl(){
    var displayResult = document.getElementById('result');

    var localDb = JSON.parse(localStorage.getItem('bookmarksKey'))
    displayResult += localDb

}

body{
    background: #EFEFEF
}
.content{
    margin: auto;
    margin-top: 70px;
    width: 600px;
    text-align: center;
    box-sizing: border-box;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
    fill: rgba(255,255,255,1);
    background: #fff;
    padding-top: 30px;
    padding-bottom: 30px;
}

input{
    border-radius: 3px;
}


input[type="text"]{
    color: red;
    margin-top: 10px;
    padding: 10px;
    display: block;
    border: none;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
    fill: rgba(255,255,255,1);
    background: #fff;
    width: 50%;
    margin:  auto;
}

#subButton{
    width: 30%;
    padding: 10px;
    margin:  auto;
    margin-top: 30px;
    text-align: center;
    border: none;
}

.blue{
    background-color: #3D78FF;
    color: #fff;
}

input[type="button"]:hover{

}

#saved{
    background:#20c65b !important;
    box-sizing: border-box;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
    fill: rgba(255,255,255,1);
    background: #fff;
    border-radius: 3px;
    width: 250px;
    text-align: center;
    padding:1px 5px;
    color: #fff;
}


#resultPanel{
    display: block;
    background: #fff;
    box-sizing: border-box;
    filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.161));
    fill: rgba(255,255,255,1);
    background: #fff;
    padding: 10px;
    margin-top: 20px;
    width: 250px;
}

#visit{

}

我在

的身体负荷下尝试致电

 <div class="content">
     <h1>Website Bookmarker</h1>
     <form id="form1">
         <label for="">Name: </label> 
         <input type="text" name="" id="name" placeholder="Website">
         <br>
         <label for="">Url: </label><input type="text" name="" id="url" placeholder="Website">
        <button class="blue" id="subButton" type="button">Submit</button>
            
     </form>
 </div>

 <div id="displayResult">
     <div id="saved">
         <h3>SAVED BOOKMARK</h3>
    </div>
    <div id="result">
    </div>
</div>

fetchUrl()

但是，每当我单击“提交”按钮时，它都不会将<body onload="fetchUrl()">附加到DOM，直到刷新页面，然后它才会复制DOM本地存储中存储的所有数据。

Answer 1

与此：

var displayResult = document.getElementById('result');

您将获得dom元素的引用。因此，您可以使用dom element API。以一种简单的方式显示它：

displayResult.innerHTML = '<pre>' + localStorage.getItem('bookmarksKey') + '</pre>'

但是，如果要以漂亮的方式显示它，则必须遍历数据并使用api构建元素。因此，首先学习api。

Answer 2

您可以使用以下代码段

window.onload = function() {
    fetchUrl();
};
document.getElementById('subButton').addEventListener('click',storeFormInput)
var bookmarks= []
function storeFormInput(e){
    e.preventDefault()
    //get input values
    var nameInput = document.getElementById('name').value;
    var urlInput = document.getElementById('url').value;


    //create a bookmark object
    let bookmark = {
        name: nameInput,
        url: urlInput
    }
    // store bookmark in bookmarks array
    bookmarks.push(bookmark);
    localStorage.setItem('bookmarksKey',JSON.stringify(bookmarks));
    fetchUrl()
}

    function prepareHTML(data){
    var str = ''
    if(data.length){
        str += '<table>'
        for(var i=0; i<data.length; i++){
        str += '<tr>'
            str += '<td>' + data[i].name + '</td>' 
            str += '<td>' + data[i].url + '</td>'
        str += '</tr>' 
        }
        str += '</table>'
    }
    return str
}

从元素数组中准备HTML并在结果div的innerHTML中进行设置...

如何将数据从localStorage附加到DOM上的元素

2 个答案: