Di masa-masa awal internet, Anda membutuhkan server untuk menyimpan data. Namun saat ini, melalui LocalStorage, Anda dapat menyimpan data di browser dan aplikasi tanpa berkomunikasi dengan server back-end
Pada artikel ini, Anda akan belajar tentang aplikasi teoretis dan praktis dari LocalStorage dalam JavaScript
Mari kita bicara tentang penyimpanan web
Sebelum kita terjun ke real deal, mari kita lihat definisi penyimpanan web. Penyimpanan web adalah salah satu fitur hebat HTML5 yang memungkinkan aplikasi web menyimpan data secara lokal di dalam browser pengguna
Dua bentuk penyimpanan web yang paling umum adalah Penyimpanan Lokal dan Penyimpanan Sesi. Perbedaan utama antara kedua bentuk penyimpanan web ini adalah data yang disimpan di //Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names)); 1 tidak pernah meninggalkan browser dan tetap di sana hingga Anda menghapusnya secara eksplisit. Sebaliknya, data yang disimpan di //Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names)); _2 dihapus setelah tab/jendela browser ditutup
Apa itu Penyimpanan Lokal?
Seperti disebutkan sebelumnya, LocalStorage adalah bentuk penyimpanan web yang disediakan oleh browser yang memungkinkan aplikasi web menyimpan data secara lokal di dalam browser pengguna tanpa tanggal kedaluwarsa. Di sini, data yang disimpan akan tetap tersedia bahkan saat Anda menutup tab/jendela browser
Perhatikan bahwa data yang disimpan di Penyimpanan Lokal hanya disimpan di browser pengguna di perangkat yang mereka gunakan untuk mengakses situs. Oleh karena itu, pengguna tidak dapat mengakses data yang disimpan jika mereka mengunjungi kembali situs yang sama nanti dengan browser yang berbeda atau di perangkat lain
Kasus Penggunaan Penyimpanan Lokal
Berikut ini menyajikan beberapa kasus penggunaan LocalStorage sehari-hari
1. Menyimpan Data Formulir yang Diserahkan Sebagian
Jika pengguna mengisi formulir panjang secara online, Penyimpanan Lokal dapat menjadi sumber daya yang berguna untuk menyimpan input pengguna. Dalam hal ini, bahkan jika internet terputus antara mengisi formulir dan mengirimkannya, pengguna tidak akan kehilangan masukan dan dapat melanjutkan dari bagian terakhir yang mereka tinggalkan
2. Caching
Caching mengacu pada penyimpanan data seperti detail login pada perangkat pengguna sehingga permintaan di masa mendatang untuk data tersebut dapat dilayani lebih cepat. Anda dapat menggunakan LocalStorage untuk meng-cache seluruh situs web sehingga pengguna tetap dapat mengakses situs tersebut meskipun mereka sedang offline
3. Database untuk aplikasi dasar
Seperti disebutkan sebelumnya, penyimpanan data pada awalnya hanya dimungkinkan dengan berkomunikasi dengan database melalui backend. Namun kini, dengan LocalStorage, Anda dapat menyimpan data di frontend tanpa memerlukan database. Karenanya LocalStorage terkadang dapat berfungsi sebagai database "kecil" untuk aplikasi dasar
Cara Mengakses Penyimpanan Lokal
Mengakses LocalStorage cukup sederhana dan hanya memerlukan beberapa langkah
- Buka situs web atau aplikasi web apa pun dan buka konsol browser dengan menekan F12 pada keyboard
- Selanjutnya, klik tab Aplikasi, dan di menu sebelah kiri, Anda akan melihat //Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names)); 1 di bawah tab Penyimpanan seperti yang ditunjukkan di bawah ini
- Klik pada tarik-turun //Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem("user-info", JSON.stringify(user));
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));
1 dan selanjutnya klik pada item tarik-turun.
Seperti yang bisa dilihat, ada dua kolom, //Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names)); 5, dan //Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names)); 6. Di sinilah LocalStorage menyimpan setiap data yang Anda simpan ke dalamnya
Cara Menggunakan Penyimpanan Lokal
Anda dapat menggunakan metode berikut untuk mengelola data di LocalStorage
MethodDescription//Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names)); _7Untuk menyimpan data di LocalStorage. //Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names)); 8Untuk mendapatkan atau mengambil data dari LocalStorage________0______9Untuk menghapus data dari LocalStorage menggunakan kuncilocalStorage.getItem("user-info"); 0Untuk mengambil data dari LocalStorage pada indeks tertentu
setItem( )
Metode ini digunakan untuk menyimpan data di LocalStorage. Itu menerima kunci sebagai argumen pertama dan kemudian nilai sebagai argumen kedua
Mari tambahkan data ke //Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem("user-info", JSON.stringify(user));
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));
_1 menggunakan yang berikut ini
localStorage.setItem("name", "Mandy"); // Here, `name` is the key and `Mandy` is the value
Masuk ke mode layar penuh Keluar dari mode layar penuh
Seperti disebutkan sebelumnya, LocalStorage menyimpan data sebagai string, jadi jika Anda ingin menyimpan data seperti objek dan array, Anda perlu mengonversinya menjadi string menggunakan metode localStorage.getItem("user-info"); 2
Mari kita lihat bagaimana ini bekerja
//Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names));
Masuk ke mode layar penuh Keluar dari mode layar penuh
getItem()
Gunakan metode //Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names)); _8 untuk mengambil data dari Penyimpanan Lokal. Metode ini menerima satu parameter, yaitu //Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names)); 5 yang digunakan saat menyimpan data
Misalnya, untuk mengambil data seperti objek localStorage.getItem("user-info");
5 di atas, Anda akan menggunakan pernyataan berikut
localStorage.getItem("user-info"); _
Masuk ke mode layar penuh Keluar dari mode layar penuh
Kode di atas akan mengembalikan string localStorage.getItem("user-info");
_6 seperti yang ditunjukkan di bawah ini
"{name:"Mandy", age:"23"}"
Masuk ke mode layar penuh Keluar dari mode layar penuh
Anda kemudian harus mengonversinya menjadi objek menggunakan metode localStorage.getItem("user-info");
7
JSON.parse(localStorage.getItem('user-info'));
Masuk ke mode layar penuh Keluar dari mode layar penuh
hapusItem()
Gunakan metode //Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names)); _9 untuk menghapus data dari Penyimpanan Lokal. Metode ini menerima //Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names)); _5 sebagai parameter
Misalnya, Anda akan menggunakan pernyataan berikut untuk menghapus objek localStorage.getItem("user-info");
5 dari LocalStorage
localStorage.removeItem("user-info");
Masuk ke mode layar penuh Keluar dari mode layar penuh
kunci()
Gunakan metode "{name:"Mandy", age:"23"}"
_1 untuk mengambil data dari LocalStorage, di mana "{name:"Mandy", age:"23"}"
2 mewakili "{name:"Mandy", age:"23"}"
3 data yang ingin Anda ambil
localStorage.key(2);
Masuk ke mode layar penuh Keluar dari mode layar penuh
jernih()
Gunakan metode "{name:"Mandy", age:"23"}"
_4 untuk menghapus atau menghapus semua data dari LocalStorage pada saat tertentu
localStorage.clear()
Masuk ke mode layar penuh Keluar dari mode layar penuh
Proyek
Sekarang setelah Anda mempelajari tentang metode utama yang digunakan untuk mengelola data di LocalStorage, mari kita mengotori tangan kita dengan membuat aplikasi web di mana pengguna dapat
- Simpan data ke Penyimpanan Lokal
- Ambil datanya
- Hapus/Hapus data menggunakan //Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names)); 5
- Dan juga bersihkan semua data dari LocalStorage
Mari kita mulai dengan membuat folder baru dan membukanya di editor kode. Selanjutnya, buat tiga file, "{name:"Mandy", age:"23"}" 6 , "{name:"Mandy", age:"23"}" 7 dan "{name:"Mandy", age:"23"}" 8
Ayo Kode
File "{name:"Mandy", age:"23"}"
_6 akan berisi markup HTML untuk aplikasi web. Kode HTML terdiri dari formulir yang memiliki berbagai bidang input dengan tombol
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Local Storage</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="form"> <form id="userForm"> <h1>LocalStorage Application</h1> <label for="userName">User</label> <input type="text" id="userName" placeholder="Enter user name" required autofocus /><br /> <label for="age">Age</label> <input type="number" id="age" placeholder="Enter user age" required /><br /> <label for="key">Key</label> <input type="text" id="key" placeholder="Enter key" required /><br /> <button type="submit">Save user</button> </form> <br /> <label for="key">Enter Key to retrieve user</label> <input type="text" id="retrieveKey" placeholder="Enter key to access user" required /><br /> <button id="retrieveButton">Retrieve user</button> <br /> <div id="userData"></div> <br /> <label for="removeKey">Enter Key to delete user</label> <input type="text" id="removeKey" placeholder="removeKey" required /><br /> <button id="removeButton">Delete user</button> <br /> <button id="clearButton">Delete all users</button> </div> <script type="text/javascript" src="main.js"></script> </body> </html>
Masuk ke mode layar penuh Keluar dari mode layar penuh
Berikut kode CSSnya
/* base styles */ html { font-size: 67.5%; } body { font-size: 1.6rem; padding: 0; margin: 0; } /* form */ #form { margin-left: 2rem; }
Masuk ke mode layar penuh Keluar dari mode layar penuh
Inilah file "{name:"Mandy", age:"23"}"
_8 yang berisi semua fungsi untuk menyimpan, mengambil, dan menghapus data dari LocalStorage
//Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem("names", JSON.stringify(names)); 0
Masuk ke mode layar penuh Keluar dari mode layar penuh
Hasil
Video berikut menunjukkan bagaimana hasil akhir proyek bekerja
Beberapa Poin Penting Tentang Penyimpanan Lokal
- Penyimpanan lokal tidak memiliki perlindungan data dan karenanya tidak aman untuk menyimpan data sensitif karena dapat diakses oleh siapa saja
- Penyimpanan lokal hanya dapat menyimpan maksimal 5 MB data di browser
Kesimpulan
Saya mendorong Anda untuk berlatih dan bereksperimen dengan LocalStorage dengan menggunakannya di aplikasi Anda. Biasakan untuk menyimpan, mengambil, dan menghapus data darinya
Terima kasih sudah membaca
Saya harap ini menjadi bacaan yang bermanfaat. Silakan bagikan artikel ini dan ikuti saya di Twitter @dboatengx untuk pembaruan pada posting mendatang