Web Storage API | JavaScript

Halo! Materi untuk hari ini saya mempelajari tentang web storage API dalam HTML. Web storage itu suatu API yang menyimpan data atau informasi di browser client menggunakan JavaScript. Web storage ini ada dua jenis, yaitu local storage dan session storage. Local storage itu bisa menyimpan data di browser dan akan ada seterusnya, sedangkan session storage itu sama dengan local storage, tapi akan menghapuskan data ketika tab atau browser-nya di tutup. Di sini akan menjelaskan tentang local storage, untuk session storage ganti localStorage dengan sessionStorage. Baiklah, kita langsung saja ke JavaScript-nya.

Di fungsi pertama ini, ada sebuah kode yang berfungsi untuk memasukkan data ke web storage. Fungsi ini pertama akan membuat variabel set dan key yang didapatkan dari input teks. Trim itu digunakan untuk membuang spasi di depan dan belakang. Kemudian akan dicek apa kedua variabel itu ada nilainya. Lalu, dimasukkan ke web storage dengan localStorage.setItem(). Kemudian, nilai input teksnya dihapuskan.

Seterusnya, ke fungsi kedua. Fungsi ini akan mengambil data dengan key. Pertama, akan membuat variabel key dari input teks serta ditrim. Kemudian dicek untuk nilainya key. Lalu, mengambil dari web storage dengan localStorage.getItem() dan dimasukkan ke input teks sebagai nilainya.

Selanjutnya adalah fungsi ketiga. Fungsi ini akan menghapus data dengan key. Pertama, akan mendapat variabel key yang sudah ditrim dari input teks. Kemudian dicek untuk nilainya. Lalu, menghapus data yang ada di web storage sesuai key-nya dengan menggunakan localStorage.removeItem().

Fungsi terakhir ini sebenarnya opsional, bisa ditambah ataupun tidak. Fungsi ini akan mengambil semua key yang ada di web storage dan menampilkannya. Pertama, akan membuat variabel yang mengandung div yang akan dimasukkan list nanti. Web storage kemudian akan dicek apakah mempunyai isi, lalu akan menampilkan div-nya tadi jika ada isinya. Seterusnya, akan membuat list dan kemudian akan memasukkan semua key yang ada di web storage ke dalam list tersebut. Terakhir, akan dimasukkan ke div.

Sudah selesai untuk materi web storage API. Jumpa lagi di materi berikutnya!

Project Source Code

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Server - localStorage</title>
    <style>
        body {
            background-color: rgb(220, 220, 220);
        }
        div {
            border: 2px solid black;
        }
        p {
            margin: 5px auto;
        }
        button {
            margin: 5px auto;
            width: 60%;
        }
        .main-container {
            border: none;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            margin: auto;
        }
        .module {
            background-color: rgb(240, 240, 240);
            display: flex;
            flex-direction: column;
            padding: 5px 10px;
            margin: 30px;
            width: 20%;
        }
        #child-container {
            display: none;
            margin: 5px auto;
            width: 80%;
        }
    @media only screen and (max-width: 768px) {
        .module {
            display: flex;
            flex-direction: column;
            padding: 5px 10px;
            margin: 30px;
            width: 80%;
        }
    }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="module">
            <p>Set item to localStorage</p>
            <p>Set info: <input type="text" id="set-info" autocomplete="off"></p>
            <p>Set as: <input type="text" id="set-as" autocomplete="off"></p>
            <button onclick="setInfo()">Set</button>
        </div>

        <div class="module">
            <p>Get item from localStorage</p>
            <p>Get info: <input type="text" id="get-info" autocomplete="off" placeholder="Do not enter anything here"></p>
            <p>For key: <input type="text" id="get-key" autocomplete="off"></p>
            <button onclick="getInfo()">Get</button>
        </div>

        <div class="module">
            <p>Remove item from localStorage</p>
            <p>For key: <input type="text" id="remove-key" autocomplete="off"></p>
            <button onclick="removeInfo()">Remove</button>
        </div>

        <div class="module">
            <p>Get all keys from localStorage</p>
            <button onclick="getAllKeys()">Get All Keys</button>
            <div id="child-container"></div>
        </div>
    </div>
    
    <script>
        function setInfo() {
            const set = document.getElementById("set-info").value.trim();
            const key = document.getElementById("set-as").value.trim();
            if ((set != '') && (key != '')) {
                localStorage.setItem(key, set);
                document.getElementById("set-info").value = '';
                document.getElementById("set-as").value = '';
            }
        }

        function getInfo() {
            const key = document.getElementById("get-key").value.trim();
            if (key != '') {
                document.getElementById("get-info").value = localStorage.getItem(key);
            }
        }

        function removeInfo() {
            const key = document.getElementById("remove-key").value.trim();
            if (key != '') {
                localStorage.removeItem(key);
                document.getElementById("remove-key").value = '';
            }
            getAllKeys();
        }

        function getAllKeys() {
            const parentDiv = document.getElementById("child-container")
            parentDiv.innerHTML = '';
            if (localStorage.length > 0) {
                parentDiv.style.display = "block";
            } else {
                parentDiv.style.display = "none";
            }

            let list = document.createElement("ul");
            for (let i = 0; i < localStorage.length; i++) {
                let item = document.createElement("li");
                item.textContent = localStorage.key(i);
                list.appendChild(item);
            }
            parentDiv.appendChild(list);
        }
    </script>
</body>
</html>

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Server - sessionStorage</title>
    <style>
        body {
            background-color: rgb(220, 220, 220);
        }
        div {
            border: 2px solid black;
        }
        p {
            margin: 5px auto;
        }
        button {
            margin: 5px auto;
            width: 60%;
        }
        .main-container {
            border: none;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            margin: auto;
        }
        .module {
            background-color: rgb(240, 240, 240);
            display: flex;
            flex-direction: column;
            padding: 5px 10px;
            margin: 30px;
            width: 20%;
        }
        #child-container {
            display: none;
            margin: 5px auto;
            width: 80%;
        }
    @media only screen and (max-width: 768px) {
        .module {
            display: flex;
            flex-direction: column;
            padding: 5px 10px;
            margin: 30px;
            width: 80%;
        }
    }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="module">
            <p>Set item to sessionStorage</p>
            <p>Set info: <input type="text" id="set-info" autocomplete="off"></p>
            <p>Set as: <input type="text" id="set-as" autocomplete="off"></p>
            <button onclick="setInfo()">Set</button>
        </div>

        <div class="module">
            <p>Get item from sessionStorage</p>
            <p>Get info: <input type="text" id="get-info" autocomplete="off" placeholder="Do not enter anything here"></p>
            <p>For key: <input type="text" id="get-key" autocomplete="off"></p>
            <button onclick="getInfo()">Get</button>
        </div>

        <div class="module">
            <p>Remove item from sessionStorage</p>
            <p>For key: <input type="text" id="remove-key" autocomplete="off"></p>
            <button onclick="removeInfo()">Remove</button>
        </div>

        <div class="module">
            <p>Get all keys from sessionStorage</p>
            <button onclick="getAllKeys()">Get All Keys</button>
            <div id="child-container"></div>
        </div>
    </div>
    
    <script>
        function setInfo() {
            const set = document.getElementById("set-info").value.trim();
            const key = document.getElementById("set-as").value.trim();
            if ((set != '') && (key != '')) {
                sessionStorage.setItem(key, set);
                document.getElementById("set-info").value = '';
                document.getElementById("set-as").value = '';
            }
        }

        function getInfo() {
            const key = document.getElementById("get-key").value.trim();
            if (key != '') {
                document.getElementById("get-info").value = sessionStorage.getItem(key);
            }
        }

        function removeInfo() {
            const key = document.getElementById("remove-key").value.trim();
            if (key != '') {
                sessionStorage.removeItem(key);
                document.getElementById("remove-key").value = '';
            }
            getAllKeys();
        }

        function getAllKeys() {
            const parentDiv = document.getElementById("child-container")
            parentDiv.innerHTML = '';
            if (sessionStorage.length > 0) {
                parentDiv.style.display = "block";
            } else {
                parentDiv.style.display = "none";
            }

            let list = document.createElement("ul");
            for (let i = 0; i < sessionStorage.length; i++) {
                let item = document.createElement("li");
                item.textContent = sessionStorage.key(i);
                list.appendChild(item);
            }
            parentDiv.appendChild(list);
        }
    </script>
</body>
</html>

Login & Registration Form | Project

Halo! Hari ini saya membuat project tentang form login dan registrasi. Sebenarnya ini sama saja dengan yang blog materi HTML Form itu, tapi yang ini lebih lengkap dengan tambahan form login. Versi yang baru ini lebih bagus dari versi yang lama dengan UI-nya yang lebih elegen serta fitur redirect untuk login di bagian kanan atas. Versi ini mengurangi tujuh jenis input menjadi tiga, yaitu hanya email, username, dan password. Untuk password-nya sendiri, akan dicek apakah password-nya minimal 8 karakter. Untuk bagian login-nya, terdapat redirect untuk registrasi di kanan atas juga serta di bawah tombol "Masuk". Di sini juga terdapat link jika pengguna lupa password-nya. Untuk inputnya sendiri hanya ada dua, yaitu yang atas untuk email atau username, dan yang bawah untuk password. Tidak lupa juga, UI kedua form ini saya mengambil inspirasi dari beberapa website seperti Roblox, Pixiv, Twitter (X), dan Github. Itu saja untuk blog ini tentang project login dan registration form. Samp...

Brillianta Febimas Winawan

Search This Blog

Web Storage API | JavaScript

Labels

Comments

Post a Comment

Popular posts from this blog

Form Input | HTML

Login & Registration Form | Project

SVG | HTML