Question

我是网络开发的新手。我尝试将列表项添加到unorded列表。使用javascript

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Item Add Test</title>
    <script src="item.js"></script>
    <link rel="stylesheet" type="text/css" href="item.css">
</head>
<body>
<input type="text" id="initem"></input>
<br /><br />
<button onclick="myFunction1()" id="submit">SUBMIT</button>

<ul id="menu">
    <li>ABC</li>
    <li>BLA</li>
</ul>
</body>
</html>

css item.css

body {
    font-family: monospace;
    text-align: center;
    font-size: 1.5em;
}

input {
    text-align: center;
    width: 300px;
    height: 30px;
    border: 1px solid blue;
    border-radius: 5px;
    margin: 10px auto;
    padding-left: 10px;
    font-size: 1.2em;
    font-weight: bold;
}
#submit {
    font-size: 1em;
}

javascript item.js

function myFunction1() {
    var name = document.getElementById("initem").value;
    var node = document.createElement("LI");
    var textnode = document.createTextNode(name);
    node.appendChild(textnode);
    document.getElementById("menu").appendChild(node);
}

我成功将项目添加到列表中。但是当我刷新页面时，所有项目都消失了。

如何在添加项目后保存html文件或更新html文件，这样如果我刷新页面列表项目仍然存在。

Answer 1

您可以将<li>元素的文本保存在本地存储中，并在正文load事件中检索。该片段不会出于安全原因而起作用，但我尝试使用Sublime Text，这很好。

var li_texts = [];

function myFunction1() {
    var name = document.getElementById("initem").value;
    var node = document.createElement("LI");
    var text = 'Test';
    node.innerHTML = text;
    document.getElementById("menu").appendChild(node);
    li_texts.push(text);
    localStorage.setItem("li_texts", JSON.stringify(li_texts));
    
}

function loadList(){
  
  if (localStorage.getItem("li_texts") !== null) {
    var stored_names = JSON.parse(localStorage.getItem("li_texts"));
    

    for(i=0; i<stored_names.length; i++){
      var node = document.createElement("LI");
      node.innerHTML = stored_names[i];
      document.getElementById("menu").appendChild(node);

  
    }
  }
  else{
    return;
  }

}

body {
    font-family: monospace;
    text-align: center;
    font-size: 1.5em;
}

input {
    text-align: center;
    width: 300px;
    height: 30px;
    border: 1px solid blue;
    border-radius: 5px;
    margin: 10px auto;
    padding-left: 10px;
    font-size: 1.2em;
    font-weight: bold;
}
#submit {
    font-size: 1em;
}

<!DOCTYPE html>
<html>
<head>
    <title>Item Add Test</title>
    <script src="item.js"></script>
    <link rel="stylesheet" type="text/css" href="item.css">
</head>
<body onload="loadList()">
  <input type="text" id="initem"></input>
  <br /><br />
  <button onclick="myFunction1()" id="submit">SUBMIT</button>

  <ul id="menu">
    <li>ABC</li>
    <li>BLA</li>
  </ul>
</body>
</html>

如何在使用javascript添加新元素后更新本地html文件？

1 个答案: