Home / html / javascript / pemrogramman / Belajar Menerapkan localstorage Pada TODO list Menggunakan Javascript

Belajar Menerapkan localstorage Pada TODO list Menggunakan Javascript

- , ,

Belajar Menerapkan localstorage Pada TODO list Menggunakan Javascript


 

Dikesempatan kali ini, kita akan belajar bagaimana fungsi dari LocalStorage pada browser dan bagaimana cara penerapannya. untuk mempelajari localstorage ini saya akan meneruskan projek Membuat TODO list sederhana menggunakan javascript. Jadi jika ada yang masih bingung bisa pelajari postingan tentang pembuatan To Do list tersebut.

 

1. Apa itu local storage?

 

Local storage merupakan tempat di browser yang bisa digunakan utnuk menyimpan data dan data tidak akan hilang walaupun browser di close dan komputer di restart. Local storage sendiri bisa digunakan untuk menyimpan konfigurasi yang diperlukan

 

Untuk menjalankan Localstorage ini, pastikan Browser kalian support untuk penggunaan localstorage, umumnya browser terbaru seperti firefox, chrome, opera, edge memang sudah support untuk penggunaan local storage ini.

 

  2. Contoh program

Langsung saja, kita akan menggunakan program TODO list sederhana menggunakan javascript kemarin, dengan kode seperti ini.

 

<!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>
</head>
<body>
<h1 class=""> membuat todo </h1>
<form action="">
<label for="isi"> masukan isi</label>
<input type="text" name="isi" id="isi" class="isi">
<input type="button" value="tambah" class="tambah" onclick="tambah()">
</form>
<ul id="list">
</ul>
<style> .done {text-decoration: line-through;} </style>
<script>
const box = document.querySelector('#list')
function tambah() {
let tex = document.querySelector('#isi')
console.log(tex)
let todo = "<li> <span onclick='toggle(this)'> "+ tex.value +"</span>"
+ "<span onclick='del(this)'> [X] </span>" + "</li>"
box.insertAdjacentHTML('afterbegin', todo)
tex.value =""
}
function toggle(el) {
el.classList.toggle('done')
}
function del(el) {
el.parentElement.remove()
}
</script>
</body>
</html>
view raw todo_code1 hosted with ❤ by GitHub

pertama pada bagian paling atas javascript tambahkan 2 variabel tersebut. Fungsinya adalah pada variable todos  digunakan untuk pendeklarasian objek kosong sebagai penapung. Sedangkan namast berfungsi sebagai penamaan localstorage nanti.

 

let todos = {} // definisi object kosong penampung
    const namast = "STORAGE_TODO" // nama local storage (bebas) 

 

Buat fungsi synclocaldata  yang didalamnya terdapat perulangan switch.

  

function synclocaldata(activity, item, status =false) {
switch (activity) {
case 'ADD':
todos[item] = status // menambah/memperbarui array
break;
case 'UPDATE':
todos[item] = status // menambah/memperbarui array
break;
case 'DELETE':
delete todos[item] // menghapus array
break;
default:
break;
}
console.log(todos) // cek console
localStorage.setItem(namast, JSON.stringify(todos)) // menambah item ke localstorage
return
}
view raw todo_switch hosted with ❤ by GitHub

Pada kode localStorage.setItem("nama_local", "value"); ini berfungsi untuk menyimpan data tadi kedalam penyimpanan lokal sementara pada browser. 

Setelah itu, buat fungsi createlist() yang nanti akan berisi kode untuk menampilkan daftar list saat menambahkan data list.

 





function createlist(text, status) {
        let isdone = (status) ? 'done' : ''
        let todo = "<li> <span class='"+ isdone +"' onclick='toggle(this)'> "+ text +"</span>"
         +  "<span onclick='del(this)'> [X] </span>" + "</li>"
       
        box.insertAdjacentHTML('afterbegin', todo)
    }

Jangan lupa tambahkan pemanggil fungsi 

 synclocaldata('...', el.innerText, status)

 pada toggle() dan del() seperti ini

function toggle(el) {
           let status = el.classList.toggle('done')
            synclocaldata('UPDATE', el.innerText, status) //panggil update
        }

    function del(el) {
        el.parentElement.remove()
        synclocaldata('DELETE', el.previousElementSibling.innerText.trim()) // panggil delete, untuk mnghapus item localstorage yang dipilih
    }


3. penutup

Dan inilah hasil akhir kode yang kita buat tadi.

 

<!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>
</head>
<body>
<h1 class=""> membuat todo </h1>
<form action="">
<label for="isi"> masukan isi</label>
<input type="text" name="isi" id="isi" class="isi">
<input type="button" value="tambah" class="tambah" onclick="tambah()">
</form>
<ul id="list">
</ul>
<style> .done {text-decoration: line-through;} </style>
<script>
let todos = {} // definisi object kosong penampung
const namast = "STORAGE_TODO" // nama local storage (bebas)
const box = document.querySelector('#list')
if(todofromlocal = localStorage.getItem(namast)) //percabangan apakah ada item di localstorage
{
todos = JSON.parse(todofromlocal) // menyimpan data localstorage ke objek todos
for(let key in todos) {
createlist(key, todos[key]) // menampilkan list
}
console.log(todos)
}
function synclocaldata(activity, item, status =false) {
switch (activity) {
case 'ADD':
todos[item] = status // menambah/memperbarui array
break;
case 'UPDATE':
todos[item] = status // menambah/memperbarui array
break;
case 'DELETE':
delete todos[item] // menghapus array
break;
default:
break;
}
console.log(todos) // cek console
localStorage.setItem(namast, JSON.stringify(todos)) // menambah item ke localstorage
return
}
function tambah() {
let tex = document.querySelector('#isi')
console.log(tex)
let todo = "<li> <span onclick='toggle(this)'> "+ tex.value +"</span>"
+ "<span onclick='del(this)'> [X] </span>" + "</li>"
box.insertAdjacentHTML('afterbegin', todo)
synclocaldata('ADD', tex.value)
tex.value =""
}
function createlist(text, status) {
let isdone = (status) ? 'done' : ''
let todo = "<li> <span class='"+ isdone +"' onclick='toggle(this)'> "+ text +"</span>"
+ "<span onclick='del(this)'> [X] </span>" + "</li>"
box.insertAdjacentHTML('afterbegin', todo)
}
function toggle(el) {
let status = el.classList.toggle('done')
synclocaldata('UPDATE', el.innerText, status) //panggil update
}
function del(el) {
el.parentElement.remove()
synclocaldata('DELETE', el.previousElementSibling.innerText.trim()) // panggil delete, untuk mnghapus item localstorage yang dipilih
}
</script>
</body>
</html>
view raw todo_code2.html hosted with ❤ by GitHub

 saatnya kita jalankan halaman pada browser dan coba tambahkan data lalu refresh halaman tersebut. Maka data Todo list yang kita buat tadi masih tersimpan dan tampil pada halaman tersebut.

Belajar Menerapkan localstorage Pada TODO list Menggunakan Javascript Belajar Menerapkan localstorage Pada TODO list Menggunakan Javascript Reviewed by andri aditya on February 08, 2022 Rating: 5
Subscribe to: Post Comments ( Atom )

Post Comments

No comments:

Powered by Blogger.