<!DOCTYPE html>
<html>
<head>
<style media="screen">
input, button, textarea {
padding: 7px;
height: auto;
}
fieldset {
margin-bottom: 20px;
}
</style>
</head>
<body>
<fieldset>
<legend>Draft a Note</legend>
<input id="inpKey" type="text" size="40" placeholder="Title of your note...">
<br><br>
<textarea id="inpValue" type="text" rows="10" cols="80" placeholder="Write note here..."></textarea>
<br>
<button type="button" id="btnInsert">Save Note to Storage</button>
<button type="button" id="btnClear">Clear Storage</button>
</fieldset>
<fieldset>
<legend>Notes in Storage</legend>
<div id="lsOutput"></div>
</fieldset>
</body>
<script type="text/javascript">
const inpKey = document.getElementById("inpKey");
const inpValue = document.getElementById("inpValue");
const btnInsert = document.getElementById("btnInsert");
const lsOutput = document.getElementById("lsOutput");
const btnClear = document.getElementById("btnClear");
btnInsert.onclick = function() {
const key = inpKey.value;
const value = inpValue.value;
if (key && value) {
localStorage.setItem(key, value);
location.reload();
}
};
btnClear.onclick = function() {
localStorage.clear();
location.reload();
}
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
lsOutput.innerHTML += `${key}: ${value}<br />`;
}
</script>
</html>