Kuki JavaScript
- Halaman Sebelumnya Pengaturan Waktu JS
- Halaman Berikutnya Ringkasan Web API
Cookie memungkinkan Anda menyimpan informasi pengguna di halaman web.
Apa itu cookie?
Cookie adalah data yang disimpan di berkas teks kecil di komputer Anda.
Ketika server web mengirim halaman ke browser, koneksi ditutup, server akan lupa tentang segala hal tentang pengguna.
Cookie diciptakan untuk memecahkan masalah "bagaimana mengingat informasi pengguna".
- Ketika pengguna mengakses halaman web, namanya dapat disimpan di cookie.
- Ketika pengguna mengakses halaman tersebut kembali, cookie akan "ingat" namanya.
Cookie disimpan dalam pasangan nama nilai, seperti:
username = Bill Gates
Ketika browser meminta halaman dari server, cookie milik halaman akan ditambahkan ke permintaan tersebut. Dengan demikian server mendapatkan data yang dibutuhkan untuk "ingat" informasi pengguna.
Jika penggunaan local cookie di browser telah ditutup, contoh berikut ini tidak akan berfungsi.
Membuat cookie dengan JavaScript
JavaScript dapat digunakan untuk document.cookie Atur, baca, dan hapus cookie.
Dengan JavaScript, dapat seperti ini untuk membuat cookie:
document.cookie = "username=Bill Gates";
Anda dapat menambahkan tanggal berlaku (waktu UTC). Secara default, cookie akan dihapus saat browser ditutup:
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";
Dengan path Parameter, Anda dapat memberitahu peramban bahwa cookie milik jalur apa. Secara default, cookie milik halaman saat ini.
document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Membaca cookie melalui JavaScript
Dengan JavaScript, dapat seperti ini untuk membaca cookie:
var x = document.cookie;
document.cookie Dapat mengembalikan semua cookie dalam string satu, seperti: cookie1=value; cookie2=value; cookie3=value;
Mengubah cookie melalui JavaScript
Dengan menggunakan JavaScript, Anda dapat mengubahnya seperti cara Anda membuat cookie:
document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";
Cookie lama dihapus.
Menghapus cookie melalui JavaScript
Penghapusan cookie sangat mudah.
Tidak perlu menentukan nilai cookie saat menghapus cookie:
Langsung buang expires Parameter dapat diatur ke tanggal yang lalu:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
Anda seharusnya mendefinisikan jalur cookie untuk memastikan penghapusan cookie yang benar.
Jika Anda tidak menentukan jalur, beberapa peramban akan menghalangi Anda untuk menghapus cookie.
String cookie
document.cookie Properti ini kelihatan seperti string teks normal. Tetapi bukan.
Walaupun Anda mengirim document.cookie Tuliskan string cookie lengkap, saat dibaca kembali, Anda hanya dapat melihat pasangan nama-nilai nya.
Jika diatur cookie baru, cookie lama tidak akan dihapus. Cookie baru akan ditambahkan ke document.cookie, jadi jika Anda membaca document.cookie, yang Anda dapatkan akan seperti ini:
cookie1 = value; cookie2 = value;
Jika Anda ingin menemukan nilai cookie yang ditentukan, Anda harus menulis fungsi JavaScript untuk mencari nilai cookie di string cookie.
Contoh JavaScript Cookie
Dalam contoh di bawah, kita akan membuat cookie untuk menyimpan nama pengunjung.
Ketika pengunjung pertama kali datang ke halaman, dia akan diminta untuk mengisi nama. kemudian simpan nama tersebut di cookie.
Ketika pengunjung datang kembali ke halaman yang sama, dia akan menerima pesan selamat datang.
Contoh, kita akan membuat 3 fungsi JavaScript:
- Fungsi untuk menetapkan nilai cookie
- Fungsi untuk mendapatkan nilai cookie
- Fungsi untuk memeriksa nilai cookie
Fungsi untuk menetapkan cookie
Dulu, kita buat fungsi yang menyimpan nama pengunjung dalam variabel cookie:
contoh
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Penjelasan contoh:
Parameter fungsi di atas adalah: nama cookie (cname), nilai cookie (cvalue), dan berapa hari cookie akan kadaluwarsa (exdays).
Fungsi ini menetapkan cookie dengan menambahkan nama cookie, nilai cookie, dan string kadaluwarsa.
Fungsi untuk mendapatkan cookie
Lalu, kita buat fungsi yang mengembalikan nilai cookie yang ditentukan:
contoh
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Penjelasan fungsi:
Jadikan cookie sebagai parameter (cname).
Buat variabel (name) dan teks yang akan dicari (CNAME”=”).
Mengurai string cookie, mengelola cookie yang berisi karakter khusus, seperti “$”.
dengan tanda titik koma untuk memecah document.cookie ke array bernama ca (decodedCookie.split(';')).
berlakukan pengulangan array ca (i = 0; i < ca.length; i++), lalu baca setiap nilai c = ca[i].
jika ditemukan cookie (c.indexOf(name) == 0), kembalikan nilai cookie (c.substring(name.length, c.length)).
jika cookie tidak ditemukan, kembalikan "".
fungsi untuk memeriksa cookie
akhirnya, kita membuat fungsi untuk memeriksa apakah cookie sudah disetel.
jika cookie sudah disetel, akan menampilkan salam.
jika cookie belum disetel, akan muncul kotak dialog untuk bertanya nama pengguna, dan menyimpan cookie nama pengguna selama 365 hari, melalui pemanggilan setCookie fungsi:
contoh
function checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
}
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
sekarang di gabungkan
contoh
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
untuk(var i = 0; i < ca.length; i++) {
var 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() {
var user = getCookie("username");
if (user != "") {
alert("Selamat kembali " + user);
}
user = prompt("Silakan masukkan nama Anda:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
Contoh di atas akan menjalankan fungsi checkCookie() setelah halaman di-load.
- Halaman Sebelumnya Pengaturan Waktu JS
- Halaman Berikutnya Ringkasan Web API
