Skip to main content

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}');">&times;</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 = "";
    }
});

Enjoying this tutorial?


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>