Home » Javascript » LocalStorage dan SessionStorage: Contoh Code dan Fungsinya

LocalStorage dan SessionStorage: Contoh Code dan Fungsinya

by azisulyagifari
by azisulyagifari

Local 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.

Ada 4 Metode yang dapat digunakan dalam menggunakan localStorage, yaitu :

1. SetItem()
Metode ini digunakan untuk menyimpan data kedalam localStorage. Dalam penggunaannya dibutuhkan dua parameter yaitu key dan value. Berikut contoh penggunaan setItem() :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Local Storage</title>
</head>
<body>
   <h3>Local Storage</h3>
<script>
  window.localStorage.setItem('Makanan', 'Nasi Goreng');
  window.localStorage.setItem('Buah','Apel');
</script>
</body>
</html>

Pada kode tersebut Buah merupakan key yang mewakili value Apel dan Makanan merupakan key yang mewakili value Nasi Goreng.

Untuk melihat apakah data tersebut sudah tersimpan, kalian dapat mengeceknya dengan cara seperti berikut :
1. Klik kanan pada web browser
2. Klik Inspect Elemen / inspect / ctrl+shif+i jika kalian ingin menggunakan shortcut
3. Klik tab Application
4. Klik penyimpan pada local storage

Hasilnya akan seperti gambar berikut :

Pada localStorage data yang disimpan dapat berupa object atau array, hanya saja sebelum data disimpan harus diubah terlebih dahulu menjadi string karena localStorage hanya menerima tipe data string. Untuk mengubahnya kalian dapat menggunakan JSON.Stringfy(NamaVariabel).
Berikut contoh menyimpan data berupa object dan array:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Local Storage</title>
</head>
<body>
  <h3>Local Storage</h3>
<script>
  let dataObject = {
    nickname : 'Budi',
    game : 'PUBG',
    weapon : "UZi"
  }
  let str = JSON.stringify(data)
  window.localStorage.setItem("data_object", str)
  
  let dataArray = ["sapi", "kambing", "kelinci"];
  let str2 = JSON.stringify(data)
  window.localStorage.setItem("data_object", str2)
  
</script>
</body>
</html>

2. getItem()
Metode ini memungkinkan kalian untuk mengakses data yang disimpan pada localStorage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Local Storage</title>
</head>
<body>
  <h3>Local Storage</h3>
<script>
  let val = localStorage.getItem('Buah'));
  console.log(val)
</script>
</body>
</html>

Dapat dilihat dari kode diatas, untuk mengambil data dari localStorage kalian cukup menggunakan key yang telah tersimpan pada localStorage kalian sebelumnya. Isi key Buah akan ditampilkan pada tab Console di inspect element

Untuk mengambil data localStorage berupa object atau array kalian dapat menggunakan JSON.parse(NamaVariabel). Berikut adalah contoh mengambil data berupa object dan array :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Local Storage</title>
</head>
<body>
  <h3>Local Storage</h3>
<script>
  let dataObject = localStorage.getItem("data_object")
  let str = JSON.parse(dataObject)
  console.log(str)

  let dataArray= localStorage.getItem("data_array")
  let str2 = JSON.parse(dataArray)
  console.log(str2)
</script>
</body>
</html>

3. removeItem()
removeItem() digunakan untuk menghapus data tertentu pada penyimpanan localStorage kalian bedasarkan key.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Local Storage</title>
</head>
<body>
  <h3>Local Storage</h3>
<script>
  window.localStorage.removeItem('Buah')
</script>
</body>
</html>

Dari kode tersebut value Apel yang telah kalian simpan sebelumnya akan terhapus dari localStorage

4. clear()
Metode ini digunakan untuk menghapus seluruh data yang telah tersimpan di localStorage. Penggunaannya kalian tidak perlu menuliskan key ataupun value. Cukup menuliskan kode berikut :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Local Storage</title>
</head>
<body>
  <h3>Local Storage</h3>
<script>
  window.localStorage.clear()
</script>
</body>
</html>

setelah menjalankan kode tersebut kalian dapat melihat seluruh data localStorage terhapus

Tips Penting Mengenai Local Storage

LocalStroge cukup mudah untuk digunakan, namun juga mudah untuk disalahgunakan. Oleh karena itu ada beberapa tips penting yang dapat digunakan untuk mencegah penyalahgunaan dan menambah pengetahuan kalian mengenai localStorage :

  • localStorage tidak aman karena tidak memiliki perlindungan data
  • Jangan menyimpan informasi sensitif user di localStorage
  • LocalStorage mempunyai batas penyimpanan 10 MB di semua browser
  • LocalStorage bukan pengganti database berbasis server karena data hanya dapat simpan di web browser
  • Key dan value berupa string. Jika kalian ingin menyimpan value berupa object atau array kalian dapat menyimpan kedalam variabel dan mengubahnya menjadi string menggunakan JSON.Stringify(NamaVariabel)

Session Storage

SessionStorage menyimpan data secara sementara, data akan menghilang saat tab ditutup atau browser ditutup. Metode dalam sessionStorage sama halnya dengan localStorage, untuk lebih mengetahui penggunaan mari kita coba

1. SetItem()
Metode ini digunakan untuk menyimpan data. Berikut contoh penggunaannya :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Session Storage</title>
</head>
<body>
  <h3>Session Storage</h3>
<script>
  let dataObject = {
    nickname : 'Budi',
    game : 'PUBG',
    weapon : "UZi"
  }
  let str = JSON.stringify(data)
  window.sessionStorage.setItem("data_object", str)
  
  let dataArray = ["sapi", "kambing", "kelinci"];
  let str2 = JSON.stringify(data)
  window.sessionStorage.setItem("data_object", str2)
</script>
</body>
</html>

untuk mengecek apakah sudah tersimpan silakan kalian cek sama seperti mengecek pada localStorage hanya saja kalian pilih tab sessionStorage.

2. getItem()
Mengambil data dari sessionStorage.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Session Storage</title>
</head>
<body>
  <h3>Session Storage</h3>
<script>
  let dataObject = sessionStorage.getItem("data_object")
  let str = JSON.parse(dataObject)
  console.log(str)

  let dataArray= sessionStorage.getItem("data_array")
  let str2 = JSON.parse(dataArray)
  console.log(str2)
</script>
</body>
</html>

3. RemoveItem()
RemoveItem() digunakan untuk menghapus data tertentu bedasarkan key.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Session Storage</title>
</head>
<body>
  <h3>Session Storage</h3>
<script>
  window.sessionStorage.removeItem('jajanan')
</script>
</body>
</html>

4. clear()
Metode ini digunakan untuk menghapus seluruh data yang telah tersimpan di sessionStorage.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Session Storage</title>
</head>
<body>
  <h3>Session Storage</h3>
<script>
  window.sessionStorage.clear()
</script>
</body>
</html>

Tip: 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.

You may also like