Question

所以我现在正在使用JS和HTML进行一些测试，而我要做的一件事就是每次按下按钮时都使用JS将文本追加到页面上。重新加载页面后，如何保持html不变？有没有一种方法可以保存其当前状态，从而使添加的文本不会消失？很抱歉，如果以前没有回答，我对此也找不到任何答案，也不知道是否有可能。预先感谢！

<!DOCTYPE HTML> <HTML> 
<HEADER> 
<link rel="stylesheet" type="text/css" href="indexcss.css">

    <center> 
    <b> 
<TITLE> </TITLE> 
 <div id='parentID'> 

 </div>
<script> 
prompt("prompting");

var button = document.createElement("button");
button.innerHTML = "Do Something"; 
// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// 3. Add event handler
button.addEventListener ("click", function() {
    var div = document.getElementById('parentID'); 
        div.innerHTML += 'Extra stuff';
});
</script>
    <h1>

    </h1>
    </b> 
    </center> 

    </HEADER> 
<BODY> 




</BODY>

Answer 1

使用localStorage

set()
document.body.innerHTML += Math.random()
save()

function save() {
  localStorage.setItem("html", document.body.innerHTML)
}

function set() {
  let content = localStorage.getItem("html")
  if(content) {
    document.body.innerHTML = content
  }
}

<body>
  hi
</body>

保存HTML文件的当前状态？

1 个答案: