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>

Operators | PHP

Halo! IT Wajib kali ini saya belajar tentang operators dalam PHP. Dalam blog ini, saya akan membahas beberapa operator yang ada di dalam operator aritmatika. Operator aritmatika ini menggunakan nilai numerik untuk melakukan aritmatika seperti penjumlahan, pengurangan, perkalian, dan pembagian. Jadi, konsepnya ya seperti matematik. Operator penjumlahan (+) digunakan untuk menambah dua nilai numerik dan mengembalikan hasilnya. Contohnya adalah $x + $y. Operator pengurangan (-) digunakan untuk mengurangi dua nilai numerik dan mengembalikan bedanya. Contohnya adalah $x - $y. Operator perkalian (*) digunakan untuk mengalikan dua nilai numerik dan mengembalikan produknya. Contohnya adalah $x * $y. Operator pembagian (/) digunakan untuk membagi dua nilai numerik dan mengembalikan hasil baginya. Contohnya adalah $x / $y. Itu saja untuk materi operators. Jumpa lagi di materi selanjutnya! Project Source Code View Code Project Name: Demonstrasi Matrix Language(s): PHP Source Code ...

Brillianta Febimas Winawan

Search This Blog

Web Storage API | JavaScript

Labels

Comments

Post a Comment

Popular posts from this blog

Operators | PHP

Borders | CSS

Pengenalan JavaScript