Question

我想在网页上创建一个任何人都可以编辑并保存的文本框。因此，当他们刷新页面时，他们的文本仍然存在。

这是我到目前为止的简单代码。我可以编辑它只是还没弄明白如何保存它。

<div id="example-one" contenteditable="true">
<style scoped>
  #example-one { margin-bottom: 10px; }
  [contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; }
  [contenteditable="true"]:hover { outline: 2px dashed #0090D2; }
</style>
<p>Save Text</p>
</div>

Answer 1

以下是使用localStorage的最小示例：

<div id="example-one" contenteditable="true">

</div>
<p id="save">Save Text</p>

<script>
document.getElementById("save").addEventListener('click', function(el) {
    localStorage.setItem("text", document.getElementById('example-one').innerHTML);
});

window.onload = function() {
    var text = localStorage.getItem("text");
    document.getElementById('example-one').innerHTML = text;
}
</script>

使文本框可编辑并保存

1 个答案: