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>

Form Input | HTML

Halo guys! Hari ini saya sebagai pemateri mengajari tentang elemen input yang bisa digunakan dalam elemen form. Langsung saja kita membahas materinya. Jadi elemen input itu memiliki beberapa jenis berdasarkan typenya. Jenisnya itu ada banyak, namun saya akan membahas yang text, radio, checkbox, submit, dan button saja. Elemen input yang typenya text digunakan untuk mengisi data dalam bentuk teks. Jenis ini hanya ada satu baris untuk mengisi data, namun bisa overflow untuk mengakomodasi text yang panjang. Input yang typenya radio hanya membolehkan user untuk memilih satu jawaban dari beberapa opsi pilihan. Jadi, jenis ini sama dengan pilihan ganda. Seterusnya, elemen input yang typenya checkbox membolehkan user memilih lebih dari satu opsi dari beberapa opsi pilihan. Jenis ini sama dengan pilihan ganda kompleks. Selanjutnya input yang typenya submit biasa digunakan untuk mengirimkan data yang telah diisi ke server. Jenis ini seringkali ditemui dalam elemen form. Terakhir yang typenya bu...

Brillianta Febimas Winawan

Search This Blog

Web Storage API | JavaScript

Labels

Comments

Post a Comment

Popular posts from this blog

Form Input | HTML

Operators | PHP

SVG | HTML