Cache Form Inputs dengan localStorage di Javascript

Form di HTML adalah cara yang paling umum digunakan untuk mendapatkan data yang diinput user. Kalau form yang ada di web kita banyak atau ada form yang harus diisi dengan data yang panjang, meng-cache data yang diinput user mungkin bukan ide yang buruk. Tujuannya adalah apabila user tidak sengaja menutup browser atau pindah ke halaman lain ketika mengisi form, user dapat kembali ke halaman dan melanjutkan mengisi form tanpa harus mengulang dari awal. Artikel ini akan memberikan cara meng-cache user input dengan localStorage di javascript.

Catatan: Jangan menyimpan data sensitif, misalkan data kartu kredit atau password user di localStorage!!

Apa itu localStorage

LocalStorage adalah sebuah object di javascript yang memungkinkan kita untuk menyimpan data string dengan model penyimpanan key: value. Total maksimum data yang bisa disimpan adalah sebesar 5MB. LocalStorage spesifik pada origin dari suatu halaman. Ini berarti localStorage kita tidak bisa mengakses localStorage domain lain, begitu juga sebaliknya. LocalStorage di support oleh semua browser utama.
Berikut ini adalah fungsi-fungsi yang ada di localStorage untuk mengakses data:

setItem(key, value)
getItem(key)
removeItem(key)
clear()

Cara menggunakan localStorage untuk cache form inputs

Kita akan membuat HTML simple dengan sebuah form dan beberapa input. Untuk setiap input, kita memasang listener oninput untuk meng-cache data yang dimasukkan. Cache yang sudah disimpan akan diambil ketia halaman di load.
Ini contoh file yang akan kita gunakan:

<!DOCTYPE html>
<html>

<head>
    <title>Page 1</title>
</head>

<body>
    <h2>This page 1</h2>

    <form action="/page2.html" id="myForm" >
        <input name="fullName" type="text" oninput="cacheInput(this)"><br>
        <input name="address" type="text" oninput="cacheInput(this)"><br>
        <input name="favoriteFood" type="text" oninput="cacheInput(this)"><br>

        <input type="submit" value="submit">
    </form>

    <br>

    <a href="/page2.html">Go to page 2</a>
</body>

</html>

Simpan file dengan nama page1.html. Halaman ini berisi sebuah form dengan sebuah link ke halaman lain untuk menguji apakah cache nya berhasil atau tidak.

Pada setiap tag input, tambahkan listener oninput.

function cacheInput(e) {
    localStorage.setItem(e.attributes["name"].value, e.value)
}

Function ini memanggil fungsi setItem dari localStorage dengan nilai dari attribute name sebagai key nya.

Pada document load kita pasang listener untuk mengecek apakah ada data yang tersimpan di cache. Kalau ada kita akan ambil dan set datanya ke form.

window.onload = function () {
    let form = document.getElementById("myForm");
    let inputs = form.children;
    for (let i = 0; i < inputs.length; i++) {
        let el = inputs[i];
        if (el.tagName.toLowerCase() != "input" || el.attributes["type"].value != "text") {
            continue
        }
        let cachedVal = localStorage.getItem(el.attributes["name"].value)
        if (cachedVal != null) {
            el.value = cachedVal;
        }
    }
}

Sekarang kita coba buka halaman nya di browser. Untuk contoh ini saya gunakan golang untuk server static file. Kamu bisa gunakan yang lain kalau mau.

Static file server menggunakan golang:

package main

import (
	"log"
	"net/http"
)

func main() {
	fs := http.FileServer(http.Dir("assets"))
	http.Handle("/", http.StripPrefix("/", fs))

	log.Println("Listening...")
	http.ListenAndServe(":3000", nil)
}

Buat folder assets dan letakkan file html di folder tersebut. Jalankan go run main.go kemudian buka http://localhost:3000/page1.html di browser.

Coba input sesuatu di bagian input. Jangan di submit dulu. Coba klik go to page2, kemudian back ke page1. Kamu akan melihat data yang kamu input tadi masih ada di form. Coba tutup halaman kemudian buka lagi. Kemudian coba sumbit form nya kemudian kembali ke page1. Setelah di sumbit data yang di input masih ada di form. Untuk mengosongkan cache setelah data di submit bisa menggunakan fungsi ini:

<form action="/submitted.html" id="myForm" onsubmit="clearCache()">

function clearCache() {
    localStorage.clear()
}

LocalStorage sangan berguna dan mempunyai beberapa kelebihan dibanding dengan cookies. Selain mempunyai kapasitas yang lebih besar, localStorage tidak di kirim dalam setiap request ke back end. Sehingga dapat menghemat bandwith.

Yang terpenting adalah: Jangan menyimpan data sensitif, misalkan data kartu kredit atau password user di localStorage!!

javascript