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>

Validasi Input | JavaScript

Halo! IT Corner Rabu saya belajar tentang cara melakukan validasi input di JavaScript. Kalian sudah tahu kan cara mengambil input, baik dari element input ataupun menggunakan prompt dalam JavaScript. Nah, input yang diterima itu kadang-kadang tidak sesuai dengan program yang telah dibuat. Contohnya input yang meminta password 8 karakter, tetapi yang diterima adalah password 6 karakter. Caranya supaya input tersebut tidak diterima supaya nanti programnya tidak error yaitu menggunakan validasi. Cara validasi yang dapat digunakan untuk yang ini dapat menggunakan metode length. Misalkan, jika ingin membuat kondisi di mana passwordnya minimal 8 karakter, jadi dapat menggunakan metode tadi dalam perintah if. Contohnya di bawah ini. let input = document.getElementById("t1").value; if (input.length < 8) { return; } Di situ akan mengambil nilai dari elemen input, kemudian akan dicek apakah panjang input kurang dari lapan. Jika iya, akan keluar dari function, dan jika tida...

Brillianta Febimas Winawan

Search This Blog

Web Storage API | JavaScript

Labels

Comments

Post a Comment

Popular posts from this blog

Borders | CSS

Validasi Input | JavaScript

Pengenalan JSON