Manfaat Local Storage Pada Website

 

Jakarta, 24 Mei 2021.

Baru saja sepulang nguli, mampir beli nasi bungkus di warteg langganan. Sambil menunggu antrian saya buka hp sekedar melihat-lihat group facebook. Kali ini yang saya buka adalah group javascript Indonesia. Salah satu group yang sering saya kunjungi kala senggang atau kala nggak nemu ide atau solusi untuk script-script aplikasi saya.

Sebagai Newbie memang harus rajin ikut group untuk belajar, yah walaupun seringkali pertanyaan yg saya tulis disana jarang mendapat solusi secara cepat. Tp setidaknya dari komen saya bisa menemukan ide untuk mengatasi permasalahan saya.

Kali ini saya menemukan sebuah pertanyaan tentang bagaimana cara membuat sebuah popup yg hanya muncu sekali, jadi setelah di clik maka dia akan ngumpet sampai sekian waktu.

Yang saya tangkap ini adalah popup semacam iklan yg sering muncul dengan kurang ajarnya selama kita browsing, tp ini lebih beradab dan baik juga karena dibuat ketentuan disana. Permintaanya adalah munculu hanya sekali dalam sehari. jadi saat di klose maka dia akan hilang dan nggak muncul lagi sampai hari telah berganti.

Maka dari itu konsep yg ada dalam otak saya adalah session, karena tidak menggunakan backend, jd saya pakai session di client.

Sebagaimana konsep session, session pada sebuah aplikasi  yaitu menyimpan data untuk digunakan dalam jangka waktu tertentu. Misal kita login ke gmail maka kita sudah memiliki session pada gmail, dan kita bisa beraktifitas dengan fitur-fitur yg tersedia hanya pada saat login.

Setahu saya, cara kerja session adalah menyimpan data kedalam sebuah file, dan setiap kali dibutuhkan makan file tersebut dibaca dan dicocokkan dengan ketentuan aplikasi tersebut.

Maka dengan kosep tersebut saya membuat sebuah sesi di sisi client. Saya sebut disisi client karena file disimpan di sisi client, dalam hal ini localStorage disimpan di browser.

Konsepnya seperti ini :

  1. Halaman memiliki popup yg muncul terus menerus setiap kali halaman diakses.
  2. Kita akan membuat control dimana popup setelah di tutup maka tidak akan muncul selama hari yang sama.
  3. Halaman memiliki script untuk membaca localStorage
    • Jika localStorage tersedia maka cek nilainya, jika nilainya adalaha hari ini, maka popup tidak muncul
    • Jika localStorage tersedia tapi nilainya berbeda dengan hari ini maka popup muncul
    • Jika localStorage tidak tersedia maka popup muncul
    • Jika popup muncul dan ditutup(click) maka popup hilang dan simpan ke localStorage dengan nilai hari ini
  4. Dengan ketentuan diatas maka kita sudah bisa membuat sebuah control popup yg muncul hanya sekali dalam sehari di halaman kita

Sekarang kita mulai praktek dalam membuat script. Cukup dengan 1 buah file html saja.

Buat file dengan nama popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            margin: 0;
        }
        .popup {
            position: fixed;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 100;
        }
        .popup .popup-content {
            width: 300px;
            height: 200px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(255, 255, 255);
        }
        .popup .popup-content:hover {
            background: rgb(13,13,255);
            background: radial-gradient(circle, rgba(13,13,255,1) 8%, rgba(3,0,220,1) 30%, rgba(53,49,133,1) 100%, rgba(0,212,255,1) 100%);
            color: white;
            border: white;
        }
        .popup .popup-content h1 {
            border-top: solid 5px black;
            border-bottom: solid 5px black
        }
        #popup-h1 {
            cursor: pointer;
        }
        div.content {
            width: 100vw;
            text-align: center;
            padding-top: 20%;
        }
    </style>
</head>
<body>

    <div class="popup active">
        <div class="popup-content">
            <h1 id="popup-h1">NDALU.ID</h1>
        </div>
    </div>

    <div class="content">CONTENT OF nDalu.id</div>

    <script>
        let date = new Date()
        const tahun = date.getFullYear()
        const bulan = date.getMonth()
        const tanggal = date.getDate()
        date = tahun+'/'+bulan+'/'+tanggal
        const popupData = localStorage.getItem('popup')
        const trigger = document.querySelector('#popup-h1')
        const target = document.querySelector('.popup')

        if (popupData == date) {
            closePopUp()
        }

        function closePopUp() {
            target.style.display = 'none'
            localStorage.setItem('popup', date)
        }
        
        trigger.addEventListener('click', ()=> {
            closePopUp()
        })
    </script>
    
</body>
</html>

Penjelasan

DI file diaterdiri dari 3 bagian utama, yaitu :

  1. style
  2. html
  3. script

STYLE

css untuk mengatur tampilan agar lebih cantik

<style>
        body {
            margin: 0;
        }
        .popup {
            position: fixed;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 100;
        }
        .popup .popup-content {
            width: 300px;
            height: 200px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(255, 255, 255);
        }
        .popup .popup-content:hover {
            background: rgb(13,13,255);
            background: radial-gradient(circle, rgba(13,13,255,1) 8%, rgba(3,0,220,1) 30%, rgba(53,49,133,1) 100%, rgba(0,212,255,1) 100%);
            color: white;
            border: white;
        }
        .popup .popup-content h1 {
            border-top: solid 5px black;
            border-bottom: solid 5px black
        }
        #popup-h1 {
            cursor: pointer;
        }
        div.content {
            width: 100vw;
            text-align: center;
            padding-top: 20%;
        }
    </style>

HTML

Isi konten (berada dalam tag body)

<div class="popup active">
      <div class="popup-content">
            <h1 id="popup-h1">NDALU.ID</h1>
      </div>
</div>

<div class="content">CONTENT OF nDalu.id</div>

SCRIPT

Javascript (ini yg berperan dalam pokok bahasan kita kali ini)

<script>
        let date = new Date() //pertama kita tentukan tanggal hari ini
        const tahun = date.getFullYear() //ambil nilai tahun
        const bulan = date.getMonth() //ambil nilai bulan
        const tanggal = date.getDate() //ambil tanggal
        date = tahun+'/'+bulan+'/'+tanggal //gabungkan kedalam bentuk tahun/bulan/tanggal
        const popupData = localStorage.getItem('popup') //ambil localstorage dengan nama popup
        const trigger = document.querySelector('#popup-h1') //deklarasikan trigger untuk menutup popup
        const target = document.querySelector('.popup') //deklarasikan elemen popup

        if (popupData == date) { //Jika localstorage bernilai sama dengan tanggal hari ini
            closePopUp() //Maka jalankan fungsi popup
        }

		//Fungsi closepopup untuk menutup popup dan simpan kedalam localStorage dengan nama popup dengan nilai date
        function closePopUp() {
            target.style.display = 'none'
            localStorage.setItem('popup', date)
        }
        
        //tambahkan listener click untuk menutup halaman
        trigger.addEventListener('click', ()=> {
            closePopUp() //jika diclik akan menjalankan fungsi closePopUp()
        })
</script>

Inti dari pokok bahasan kali ini ada di localStorage.getItem('namaItem') dan localStorage.setItem('namaItem', ‘nilai item’)

Untuk melihat localstorage silahkan klik kanan halaman dan pilih inspect

Dan bedakan setelah di tutup popupnya

Di Storage → local storage akan terdapat sebuah key bernama popup dengan nilai tahun/bulan/tanggal hari saat di click. Lalu refresh halaman, popup tidak akan muncul lagi. Lalu coba klik kanan pop key popup dan delete lalu refresh, Voila, popup muncul lagi.

Next, akan saya ubah dari localStorage ke cookies.

Ok itu saja semoga bermanfaat paling tidak jika saya lupa bisa jadi contekan untuk diri saya sendiri.

Jika ada pertanyaan silahkan tinggalkan di kolom komentar, atau silahkan klik halaman contact.

 

Terima kasih.

tutorial javascript javascript clientside client localstorage session cookies mengatur munculnya popup mengatur munculnya modal

COMMENT
  • Belum ada comment untuk saat ini, jadilah yang pertama
    Kamis, 11 Maret 2021 | by Admin

If you login by google, we're not save your important data and your mail is not published