Menu
I've started a quick exercise on using local storage/session storage in JS and there seems to be an issue with my LoadFromStorage function. Every time it is called the console logs "replaceNode" is not a function.
window.onload = function() {
document.getElementById('btnAdd').onclick = function() {
localStorage.setItem(document.getElementById("toStorageKey").value,
document.getElementById("toStorageValue").value);
LoadFromStorage();
}
document.getElementById('btnRemove').onclick = function() {
localStorage.removeItem(document.getElementById('toStorageKey').value);
LoadFromStorage();
}
document.getElementById('btnClear').onclick = function() {
localStorage.clear();
LoadFromStorage();
}
function LoadFromStorage() {
var storageDiv = document.getElementById('storage');
var tbl = document.createElement('table');
tbl.id = "storageTable";
if (localStorage.length > 0) {
for (var i = 0; i < localStorage.length; i++) {
var row = document.createElement("tr");
var key = document.createElement("td");
var val = document.createElement('td');
key.innerText = localStorage.key(i);
val.innerText = localStorage.getItem(key.innerText);
row.appendChild(key);
row.appendChild(val);
tbl.appendChild(row);
}
} else {
var row = document.createElement('tr');
var col = document.createElement('td');
col.innerText = 'No data in local storage.';
row.appendChild(col);
tbl.appendChild(row);
}
if (document.getElementById('storageTable')) {
document.getElementById('storageTable').replaceNode(tbl);
} else {
storageDiv.appendChild(tbl);
};
};
}section {
margin-top: 15px;
}<section>
Key: <input type="text" id="toStorageKey"><br> Value: <input type="text" id="toStorageValue"><br>
</section>
<section>
<button type="button" id="btnAdd">Add to storage</button>
<button type="button" id="btnRemove">Remove from storage</button>
<button type="button" id="btnClear">Clear storage</button>
</section>
<div id="storage">
<p>Current Storage Contents</p>
</div>
614
asked Mar 22 '26 16:03
Might be it not great solution but now you can able add key value in local storage.
Hope, it will help you some extend.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<style>
section {
margin-top: 15px;
}
</style>
<script>
window.onload = function () {
document.getElementById('btnAdd').onclick = function () {
localStorage.setItem(document.getElementById("toStorageKey").value,
document.getElementById("toStorageValue").value);
LoadFromStorage();
}
document.getElementById('btnRemove').onclick = function () {
localStorage.removeItem(document.getElementById('toStorageKey').value);
console.log("Remove Item",document.getElementById('toStorageKey').value)
LoadFromStorage();
}
document.getElementById('btnClear').onclick = function () {
localStorage.clear();
LoadFromStorage();
}
function LoadFromStorage() {
var storageDiv = document.getElementById('storage');
var tbl = document.createElement('table');
tbl.id = "storageTable";
if (localStorage.length > 0) {
for (var i = 0; i < localStorage.length; i++) {
var row = document.createElement("tr");
var key = document.createElement("td");
var val = document.createElement('td');
key.innerText = localStorage.key(i);
val.innerText = localStorage.getItem(key.innerText);
row.appendChild(key);
row.appendChild(val);
tbl.appendChild(row);
}
} else {
var row = document.createElement('tr');
var col = document.createElement('td');
col.innerText = 'No data in local storage.';
row.appendChild(col);
tbl.appendChild(row);
}
if (document.getElementById('storageTable')) {
document.getElementById('storageTable').replaceWith(tbl);
} else {
storageDiv.appendChild(tbl);
};
};
}
</script>
</head>
<body>
<section>
Key: <input type="text" id="toStorageKey"><br>
Value: <input type="text" id="toStorageValue"><br>
</section>
<section>
<button type="button" id="btnAdd">Add to storage</button>
<button type="button" id="btnRemove">Remove from storage</button>
<button type="button" id="btnClear">Clear storage</button>
</section>
<div id="storage">
<p>Current Storage Contents</p>
</div>
</body>
</html>Now you can able to added key and value to local Storage.
OutPut Screen-Shoot:
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
