LocalStorage dalam JavaScript

Apa itu JavaScript LocalStorage?

LocalStorage adalah fitur dari Web Storage API yang memungkinkan penyimpanan data secara lokal di dalam browser tanpa batas waktu tertentu. Data yang disimpan di LocalStorage bersifat persisten, artinya data tersebut tetap ada bahkan setelah browser ditutup dan dibuka kembali.

LocalStorage hanya dapat menyimpan data dalam bentuk string dan memiliki kapasitas penyimpanan sekitar 5-10 MB tergantung pada browser yang digunakan.

Kegunaan LocalStorage

LocalStorage berguna untuk menyimpan data yang perlu tetap ada di sisi klien untuk jangka waktu yang lama, seperti preferensi pengguna, tema aplikasi, atau data sesi.

Contoh Penggunaan LocalStorage

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LocalStorage Example</title>
</head>
<body>
    <h1>LocalStorage Example</h1>
    <input type="text" id="inputField" placeholder="Enter some text">
    <button id="saveButton">Save</button>
    <button id="loadButton">Load</button>
    <button id="clearButton">Clear</button>
    <p id="output"></p>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', () => {
    const inputField = document.getElementById('inputField');
    const saveButton = document.getElementById('saveButton');
    const loadButton = document.getElementById('loadButton');
    const clearButton = document.getElementById('clearButton');
    const output = document.getElementById('output');

    saveButton.addEventListener('click', () => {
        const inputValue = inputField.value;
        localStorage.setItem('savedText', inputValue);
        output.textContent = 'Data saved!';
    });

    loadButton.addEventListener('click', () => {
        const savedText = localStorage.getItem('savedText');
        if (savedText) {
            output.textContent = `Saved text: ${savedText}`;
        } else {
            output.textContent = 'No data found.';
        }
    });

    clearButton.addEventListener('click', () => {
        localStorage.removeItem('savedText');
        output.textContent = 'Data cleared!';
    });
});

Penjelasan Kode

HTML:
- inputField: Field input untuk memasukkan teks.
- saveButton: Tombol untuk menyimpan teks ke LocalStorage.
- loadButton: Tombol untuk memuat teks dari LocalStorage.
- clearButton: Tombol untuk menghapus teks dari LocalStorage.
- output: Elemen untuk menampilkan pesan atau data yang diambil dari LocalStorage.
JavaScript:
- Mendengarkan event DOMContentLoaded untuk memastikan DOM telah dimuat sebelum menambahkan event listener.
- Menambahkan event listener ke tombol:
  - Save Button: Menyimpan nilai input ke LocalStorage menggunakan localStorage.setItem('key', value).
  - Load Button: Memuat nilai dari LocalStorage menggunakan localStorage.getItem('key') dan menampilkannya di elemen output.
  - Clear Button: Menghapus nilai dari LocalStorage menggunakan localStorage.removeItem('key').

Sumber

LocalStorage adalah alat yang kuat untuk menyimpan data di sisi klien secara persisten, memungkinkan pengembang untuk membangun aplikasi web yang lebih interaktif dan responsif tanpa memerlukan server-side storage untuk setiap interaksi pengguna.

PreviousES6 NextFetchAPI dalam JavaScript

Last updated 8 months ago

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LocalStorage Example</title> </head> <body> <h1>LocalStorage Example</h1> <input type="text" id="inputField" placeholder="Enter some text"> <button id="saveButton">Save</button> <button id="loadButton">Load</button> <button id="clearButton">Clear</button> <p id="output"></p> <script src="script.js"></script> </body> </html>