JavaScript
LocalStorage vs SessionStorage
script.js
// AZUL CODING ---------------------------------------
// JavaScript - LocalStorage vs SessionStorage
// https://youtu.be/0taLxS1xadM
const addBtn = document.getElementById("add-btn");
const keyTxt = document.getElementById("key-txt");
const valTxt = document.getElementById("val-txt");
const itemList = document.getElementById("item-list");
function addItem(key, value) {
itemList.innerHTML += `
<tr>
<td><input type="text" value="${key}" disabled></td>
<td><input type="text" value="${value}" onchange="updateItem(this, '${key}');"></td>
<td><button onclick="deleteItem(this, '${key}');">×</button></td>
</tr>
`;
}
function updateItem(el, key) {
localStorage.setItem(key, el.value);
console.log(`Updated '${key}'`);
}
function deleteItem(el, key) {
localStorage.removeItem(key);
let tr = el.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
document.addEventListener("DOMContentLoaded", () => {
for (const i of Object.entries(localStorage)) {
addItem(i[0], i[1]);
}
});
addBtn.addEventListener("click", () => {
if (keyTxt.value == "" || valTxt.value == "") {
alert("Please enter a key and value.");
} else if (localStorage.getItem(keyTxt.value) != null) {
alert("This key already exists.");
} else {
localStorage.setItem(keyTxt.value, valTxt.value);
addItem(keyTxt.value, valTxt.value);
keyTxt.value = "";
valTxt.value = "";
}
});
index.html
<!-- AZUL CODING --------------------------------------- -->
<!-- JavaScript - LocalStorage vs SessionStorage -->
<!-- https://youtu.be/0taLxS1xadM -->
<!DOCTYPE html>
<html>
<head>
<title>Azul Coding</title>
<style>
body {
margin: 40px;
background-color: #004961;
color: white;
}
* {
font-family: sans-serif;
}
table {
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
font-size: 18px;
border: 1px solid white;
}
input[type=text] {
padding: 4px 8px;
font-size: 18px;
width: 175px;
}
tr:first-child th {
border-top: 0;
padding-left: 18px;
}
tr:last-child td {
border-bottom: 0;
}
tr td:first-child, tr th:first-child {
border-left: 0;
}
tr td:last-child, tr th:last-child {
border-right: 0;
}
button {
font-size: 22px;
padding: 2px 10px;
}
</style>
<script defer src="script.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>Key</th>
<th colspan="2">Value</th>
</tr>
<tr>
<td><input id="key-txt" type="text" placeholder="Enter key"></td>
<td><input id="val-txt" type="text" placeholder="Enter value"></td>
<td><button id="add-btn">+</button></td>
</tr>
</thead>
<tbody id="item-list"></tbody>
</table>
</body>
</html>
