Cookie JavaScript
Cookie memungkinkan Anda menyimpan informasi pengguna di halaman web.
Apa itu Cookie?
Cookie adalah data, disimpan dalam file teks kecil, di komputer Anda.
Ketika server web telah mengirim halaman web ke browser, koneksi dimatikan, dan server melupakan segala sesuatu tentang pengguna.
Cookie diciptakan untuk memecahkan masalah "bagaimana mengingat informasi tentang pengguna":
- Saat pengguna mengunjungi halaman web, namanya dapat disimpan dalam cookie.
- Lain kali pengguna mengunjungi halaman, cookie "mengingat" namanya.
Cookie disimpan dalam pasangan nama-nilai seperti:
username = John Doe
Saat browser meminta halaman web dari server, cookie milik halaman ditambahkan ke permintaan. Dengan cara ini server mendapatkan data yang diperlukan untuk "mengingat" informasi tentang pengguna.
Tak satu pun dari contoh di bawah ini akan berfungsi jika browser Anda menonaktifkan dukungan cookie lokal.
Buat Cookie dengan JavaScript
JavaScript dapat membuat, membaca, dan menghapus cookie dengan document.cookie
properti.
Dengan JavaScript, cookie dapat dibuat seperti ini:
document.cookie = "username=John Doe";
Anda juga dapat menambahkan tanggal kedaluwarsa (dalam waktu UTC). Secara default, cookie dihapus saat browser ditutup:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
Dengan parameter jalur, Anda dapat memberi tahu browser jalur milik cookie tersebut. Secara default, cookie milik halaman saat ini.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Baca Cookie dengan JavaScript
Dengan JavaScript, cookie dapat dibaca seperti ini:
let x = document.cookie;
document.cookieakan mengembalikan semua cookie dalam satu string seperti: cookie1=value; cookie2=nilai; cookie3=nilai;
Ubah Cookie dengan JavaScript
Dengan JavaScript, Anda dapat mengubah cookie dengan cara yang sama seperti Anda membuatnya:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Cookie lama ditimpa.
Hapus Cookie dengan JavaScript
Menghapus cookie sangat sederhana.
Anda tidak perlu menentukan nilai cookie saat menghapus cookie.
Cukup atur parameter kedaluwarsa ke tanggal yang lalu:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";
Anda harus menentukan jalur cookie untuk memastikan bahwa Anda menghapus cookie yang benar.
Beberapa browser tidak mengizinkan Anda menghapus cookie jika Anda tidak menentukan jalurnya.
String kue
Properti document.cookieterlihat seperti string teks biasa. Tapi tidak.
Bahkan jika Anda menulis seluruh string cookie ke document.cookie, ketika Anda membacanya lagi, Anda hanya dapat melihat pasangan nama-nilainya.
Jika Anda menyetel cookie baru, cookie lama tidak akan ditimpa. Cookie baru ditambahkan ke document.cookie, jadi jika Anda membaca document.cookie lagi, Anda akan mendapatkan sesuatu seperti:
cookie1 = nilai; cookie2 = nilai;
Jika Anda ingin menemukan nilai dari satu cookie yang ditentukan, Anda harus menulis fungsi JavaScript yang mencari nilai cookie dalam string cookie.
Contoh Cookie JavaScript
Dalam contoh berikut, kami akan membuat cookie yang menyimpan nama pengunjung.
Pertama kali pengunjung datang ke halaman web, dia akan diminta untuk mengisi namanya. Nama tersebut kemudian disimpan dalam cookie.
Kali berikutnya pengunjung tiba di halaman yang sama, dia akan mendapatkan pesan selamat datang.
Sebagai contoh kita akan membuat 3 fungsi JavaScript:
- Fungsi untuk menetapkan nilai cookie
- Fungsi untuk mendapatkan nilai cookie
- Fungsi untuk memeriksa nilai cookie
Fungsi untuk Mengatur Cookie
Pertama, kami membuat functionyang menyimpan nama pengunjung dalam variabel cookie:
Contoh
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Contoh menjelaskan:
Parameter dari fungsi di atas adalah nama cookie (cname), nilai cookie (cvalue), dan jumlah hari hingga cookie harus kedaluwarsa (exdays).
Fungsi menetapkan cookie dengan menambahkan bersama nama cookie, nilai cookie, dan string kedaluwarsa.
Fungsi untuk Mendapatkan Cookie
Kemudian, kami membuat functionyang mengembalikan nilai cookie yang ditentukan:
Contoh
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Fungsi dijelaskan:
Ambil nama cookie sebagai parameter (cname).
Buat variabel (nama) dengan teks yang akan dicari (cname + "=").
Decode string cookie, untuk menangani cookie dengan karakter khusus, misalnya '$'
Pisahkan document.cookie pada titik koma ke dalam larik yang disebut ca (ca = decodeCookie.split(';')).
Ulangi array ca (i = 0; i < ca.length; i++), dan bacakan setiap nilai c = ca[i]).
Jika cookie ditemukan (c.indexOf(name) == 0), kembalikan nilai cookie (c.substring(name.length, c.length).
Jika cookie tidak ditemukan, kembalikan "".
Fungsi untuk Memeriksa Cookie
Terakhir, kami membuat fungsi yang memeriksa apakah cookie telah disetel.
Jika cookie disetel, itu akan menampilkan salam.
Jika cookie tidak disetel, itu akan menampilkan kotak prompt, menanyakan nama pengguna, dan menyimpan cookie nama pengguna selama 365 hari, dengan memanggil setCookiefungsi:
Contoh
function checkCookie() {
let
username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
Semua bersama Sekarang
Contoh
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca
= document.cookie.split(';');
for(let i = 0; i < ca.length; i++)
{
let c = ca[i];
while (c.charAt(0) == '
') {
c = c.substring(1);
}
if (c.indexOf(name)
== 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function
checkCookie() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
}
Contoh di atas menjalankan checkCookie()fungsi saat halaman dimuat.