Shelby Shelby - 2 months ago 22
HTML Question

Make text box editable and save it

I am wanting to make a text box on a webpage that anyone can edit and also save. So when they refresh the page their text is still there.

Here is the simple code I have so far. I can edit it just haven't figured out how to save it.



<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

Here's a minimal example using 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>
Comments