Apakah web storage dapat diakses tanpa javascript?

Apa itu Web Storage?Web storage adalah salah satu Web API yang dapat menyimpan data secara lokal pada sisi client. Berbeda dengan objek atau array, data yang disimpan pada objek atau array JavaScript bersifat sementara, dan akan hilang jika terjadi reload atau pergantian URL pada browser. Sedangkan data yang disimpan pada Web Storage akan bertahan lebih lama karena data akan disimpan pada storage browser.Sebelum HTML5, kita melakukan hal ini dengan menggunakan cookies, namun penyimpanan cookies terbatas. Dengan hadirnya Web Storage kita dapat menampung data lebih besar dan tentunya lebih aman. Data yang disimpan web storage tersedia berdasarkan domain. Artinya, data pada suatu domain web hanya dapat diakses oleh domainnya itu sendiri. Web storage dapat menampung sebesar 10MB untuk satu domain.Tipe Web StorageWeb API menyediakan dua tipe Web Storage untuk kita gunakan, yakni sessionStorage dan localStorage.Sebelum menggunakan Web Storage baik sessionStorage atau localStorage, kita perlu memastikan browser support terhadap fitur tersebut, dengan cara:if (typeof(Storage) !== "undefined") {// Browser mendukung sessionStorage/localStorage.} else {// Browser tidak mendukung sessionStorage/LocalStorage}Seharusnya browser yang ada pada saat ini sudah mendukung kedua fitur tersebut. Google Chrome dan Mozilla Firefox tentu memilikinya.

Table of Contents Show

Contoh Penggunaan localStorage dan sessionStorage
Metode apa yang digunakan untuk menyimpan data pada web storage?
Apa yang dimaksud web storage?
Apa kelebihan menyimpan data pada LocalStorage dibandingkan dengan cookies?
Apa perbedaan besar antara penyimpanan lokal dan cookie?

Tutorial JavaScript Pemula Part 15 :Mengenal Dan Memahami Web Storage - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan Mengenal Dan Memahami Web Storage.

Sebenarnya Web Storage ini sama halnya seperti Cookie, Datanya akan tersimpan didalam web browser tapi memiliki beberapa kelebihan yaitu dapat menyimpan data lebih aman dan lebih besar dibandingkan dengan cookie, local storage dapat menyimpan data lebih dari 5 MB tanpa membebani performa dari browser.

Simak terus materinya sampai habis ya!

Web Storage itu ada dua jenisnya yaitu localStorage dan sessionStorage. LocalStorage digunakan untuk menyimpan data pada browser dan data akan tetap tersimpan walaupun browser ditutup atau komputer dimatikan sekalipun. Sedangkan sessionStorage digunakan untuk menyimpan data pada browser hanya pada satu sesi dan data akan dihapus ketika browser ditutup.

Salah satu fungsi dari Local Storage dan Session Storage yaitu dapat mempermudah kita dalam membuat atau membangun sebuah website yang lebih responsive dari sisi client.

Property dan method yang digunakan pada localStorage dan sessionStorage yaitu:

key(n) Mendapatkan nama key atau nama data urutan ke-n pada penyimpanan dimulai dari 0.
length Mendapatkan jumlah item data yang disimpan pada storage
getItem(nama_key) Mendapatkan data dari storage dengan nama yang disebutkan
setItem(nama_key, data_disimpan) Menyimpan data ke storage
removeItem(nama_key) Menghapus data pada storage dengan nama yang disebutkan
clear() Mengosongkan semua data tersimpan pada storage

Contoh Penggunaan localStorage dan sessionStorage

Menyimpan Data Ke Storage

Seperti yang saya jelaskan diatas bahwa jika kamu ingin menyimpan data ke storage maka menggunakan property setItem(). Perhatikan lah code dibawah ini:

Contoh menyimpan data ke localstorage

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Belajar Javascript</title> </head> <body> <script> localStorage.setItem('Makanan', 'Keju'); localStorage.setItem('Minuman','Susu'); </script> </body> </html>

Contoh menyimpan data ke sessionstorage

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Belajar Javascript</title> </head> <body> <script> sessionStorage.setItem('Makanan', 'Keju'); sessionStorage.setItem('Minuman','Susu'); </script> </body> </html>

Untuk melihat apakah data tersebut sudah tersimpan, kamu dapat mengeceknya dengan cara seperti berikut :

Klik kanan pada web browser
Pilih Inspect Elemen / inspect / ctrl+shif+i jika kalian ingin menggunakan shortcut
Pilih tab Application
Pilih penyimpan pada local storage/session storage

Hasilnya akan seperti gambar berikut :

Menampilkan Data Dari Storage

Untuk nampilkan data kita gunakan property getItem(). Perhatikanlah code dibawah ini:

Contoh menampilkan data dari localstorage

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Belajar Javascript</title> </head> <body> <script> var tampil = localStorage.getItem('Makanan'); console.log(tampil); </script> </body> </html>

Contoh menampilkan data dari sessionstorage

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Belajar Javascript</title> </head> <body> <script> var tampil = sessionStorage.getItem('Makanan'); console.log(tampil); </script> </body> </html>

Untuk melihat datanya tampil cara nya sama seperti sebelumnya namun pilih pada tab Console dan kira-kira hasilnya akan seperti dibawah:

Menghapus Salah Satu Data Dari Storage

Kalau kamu menghapus salah satu data dari storage, kamu bisa menggunakan property removeItem(). Perhatikanlah code dibawah ini:

Contoh menghapus salah satu data dari localstorage

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Belajar Javascript</title> </head> <body> <script> localStorage.removeItem('Minuman') </script> </body> </html>

Contoh menghapus salah satu data dari sessionstorage

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Belajar Javascript</title> </head> <body> <script> sessionStorage.removeItem('Minuman') </script> </body> </html>

Hasilnya kira-kira seperti pada gambar dibawah:

Menghapus Seluruh Data Dari Storage

Tadi kita sudah berhasil menghapus salah satu data dari Storage dan sekarang kita ingin menghapus semua data yang ada di storage, kamu menggunakan property clear() untuk menangani kasus seperti ini. Perhatikanlah code seperti dibawah:

Contoh menghapus seluruh data dari localstorage

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Belajar Javascript</title> </head> <body> <script> localStorage.clear() </script> </body> </html>

Contoh menghapus seluruh data dari sessionstorage

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Belajar Javascript</title> </head> <body> <script> sessionStorage.clear() </script> </body> </html>

Seluruh data akan berhasil dihapus, hasilnya akan seperti dibawah:

Note: LocalStorage dan SessionStorage merupakan penyimpanan web HTML 5 yang didukung disemua browser modern seperti Chorme, Opera, Firefox , Tepi, Internet Explorer, Safari, dan browser untuk Android lainnya.

Dalam pengembangan website 4 contoh diatas adalah yang menurut saya sangat sering digunakan. Untuk selebihnya kamu bisa menjelajah sendiri dan prakter sendiri.

Semoga bermanfaat!

Metode apa yang digunakan untuk menyimpan data pada web storage?

LocalStorage merupakan salah satu cara yang dapat digunakan untuk menyimpan data di web browser. Pada localStorage penyimpanan data tidak memiliki kadaluarsa, artinya data yang disimpan tetap ada meskipun browser telah ditutup.

Apa yang dimaksud web storage?

Web storage adalah salah satu Web API yang dapat menyimpan data secara lokal pada sisi client. Berbeda dengan objek atau array, data yang disimpan pada objek atau array JavaScript bersifat sementara, dan akan hilang jika terjadi reload atau pergantian URL pada browser.

Apa kelebihan menyimpan data pada LocalStorage dibandingkan dengan cookies?

Local storage dapat menyimpan data lebih aman dan lebih besar dibandingkan dengan cookie. Local storage juga dapat menyimpan data lebih dari 5 MB tanpa harus membebani performa browser.

Cookie dan penyimpanan lokal memiliki tujuan berbeda. Cookie terutama untuk membaca sisi server , penyimpanan lokal hanya dapat dibaca oleh sisi klien . Jadi pertanyaannya adalah, di aplikasi Anda, siapa yang butuh data ini - klien atau server? Jika itu adalah klien Anda (JavaScript Anda), maka tentu saja beralihlah.