Cookies memungkinkan Anda menyimpan informasi pengguna di halaman web.
Apa Cookies ?
Cookies adalah data, disimpan dalam file teks kecil, di komputer Anda.
Ketika web server telah mengirimkan halaman web ke browser, koneksi dimatikan, dan server lupa segala sesuatu tentang pengguna.
Cookies diciptakan untuk memecahkan masalah "bagaimana untuk mengingat informasi tentang pengguna":
- Bila pengguna mengunjungi halaman web, namanya dapat disimpan dalam cookie .
- Kali pengguna mengunjungi halaman, cookie "ingat" namanya.
Cookie disimpan di pasangan nama-nilai seperti:
username = John Doe
Ketika permintaan browser halaman web dari server, cookies milik halaman ditambahkan ke permintaan. Dengan cara ini server mendapatkan data yang diperlukan untuk "mengingat" informasi tentang pengguna.
Buat a Cookie dengan JavaScript
JavaScript dapat membuat, membaca, dan menghapus cookies dengan document.cookie properti.
Dengan JavaScript, a cookie dapat dibuat seperti ini:
document.cookie = "username=John Doe";Anda juga dapat menambahkan tanggal kadaluwarsa (dalam waktu UTC). Secara default, the cookie dihapus saat browser ditutup:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";Dengan parameter path, Anda dapat memberitahu browser apa jalan the cookie milik. Secara default, the cookie milik halaman saat ini.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";Baca a Cookie dengan JavaScript
Dengan JavaScript, cookies dapat dibaca seperti ini:
var x = document.cookie;document.cookie akan mengembalikan semua cookies dalam satu string seperti: cookie1=value; cookie2=value; cookie3=value; cookie1=value; cookie2=value; cookie3=value;
Mengubah a Cookie dengan JavaScript
Dengan JavaScript, Anda dapat mengubah a cookie dengan cara yang sama seperti yang Anda buat itu:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Lama cookie ditimpa.
Hapus a Cookie dengan JavaScript
Menghapus a cookie sangat sederhana. Hanya mengatur berakhir parameter untuk tanggal berlalu:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC";
Perhatikan bahwa Anda tidak harus menentukan a cookie nilai ketika Anda menghapus a cookie .
The Cookie String
The document.cookie properti tampak seperti string teks normal. Tapi itu tidak.
Bahkan jika Anda menulis seluruh cookie string untuk document.cookie , ketika Anda membacanya lagi, Anda hanya dapat melihat pasangan nama-nilai itu.
Jika Anda menetapkan baru cookie , tua cookies tidak ditimpa. Baru cookie ditambahkan ke document.cookie , jadi jika Anda membaca document.cookie lagi Anda akan mendapatkan sesuatu seperti:
cookie1 = value; cookie2 = value;
Jika Anda ingin mencari nilai satu ditentukan cookie , Anda harus menulis fungsi JavaScript yang mencari untuk cookie nilai dalam cookie tali.
JavaScript Cookie Contoh
Pada contoh untuk diikuti, kita akan membuat a cookie yang menyimpan nama pengunjung.
Pertama kali pengunjung datang ke halaman web, ia akan diminta untuk mengisi nama-Nya. Nama ini kemudian disimpan dalam a cookie .
Lain kali pengunjung tiba di halaman yang sama, ia akan mendapatkan pesan selamat datang.
Misalnya kita akan membuat 3 fungsi JavaScript:
- Sebuah fungsi untuk menetapkan cookie nilai
- Sebuah fungsi untuk mendapatkan cookie nilai
- Sebuah fungsi untuk memeriksa cookie nilai
Sebuah Fungsi Set a Cookie
Pertama, kita membuat fungsi yang menyimpan nama pengunjung di a cookie variabel:
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;
}
Contoh menjelaskan:
Parameter dari fungsi di atas adalah nama cookie (cname) , nilai the cookie (cvalue) , dan jumlah hari sampai cookie harus berakhir (exdays).
Fungsi menetapkan a cookie dengan menambahkan bersama cookiename , the cookie nilai, dan berakhir tali.
Sebuah Fungsi Mendapatkan a Cookie
Kemudian, kita membuat fungsi yang mengembalikan nilai dari yang ditentukan cookie :
Contoh
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.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 "";
}
Fungsi menjelaskan:
Ambil the cookiename sebagai parameter (CNAME).
Buat variabel (nama) dengan teks untuk mencari (CNAME + "=").
Berpisah document.cookie pada titik koma ke dalam sebuah array disebut ca (ca = document.cookie.split(';')) .
Loop melalui ca array (i=0;i<ca.length;i++) , dan membaca setiap nilai c=ca[i]) .
Jika the cookie ditemukan (c.indexOf(name) == 0) , mengembalikan nilai the cookie (c.substring(name.length,c.length) .
Jika the cookie tidak ditemukan, kembali "".
Sebuah Fungsi untuk Periksa a Cookie
Lalu, kita menciptakan fungsi yang checks jika a cookie diatur.
Jika the cookie diatur akan menampilkan ucapan.
Jika the cookie tidak diatur, maka akan muncul kotak prompt, meminta nama pengguna, dan menyimpan username cookie selama 365 hari, dengan memanggil setCookie fungsi:
Contoh
function checkCookie() {
var
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) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
"; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca
= document.cookie.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 "";
}
function
checkCookie() {
var user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
} Cobalah sendiri " Contoh di atas menjalankan checkCookie() fungsi ketika beban halaman.