Kuki JavaScript


Kuki digunakan untuk menyimpan maklumat pengguna pada halaman web.

Apakah itu Kuki?

Kuki ialah kepingan data yang disimpan dalam fail teks pada komputer anda.

Apabila pelayan web menghantar halaman web ke penyemak imbas, pelayan tidak akan merekodkan maklumat pengguna selepas sambungan ditutup.

Peranan Kuki adalah untuk menyelesaikan "cara merekod maklumat pengguna di sisi klien":

  • Apabila pengguna melawat halaman web, namanya boleh direkodkan dalam kuki.

  • Pada kali seterusnya pengguna melawat halaman, rekod akses pengguna boleh dibaca dalam kuki.

Kuki disimpan sebagai pasangan nama/nilai seperti berikut:

nama pengguna=John Doe

Apabila penyemak imbas Apabila halaman web diminta daripada pelayan, kuki kepunyaan halaman itu ditambahkan pada permintaan. Pelayan mendapatkan maklumat pengguna dengan cara ini.

Gunakan JavaScript untuk mencipta kuki

JavaScript boleh menggunakan atribut document.cookie untuk mencipta, membaca dan memadam kuki.

Dalam JavaScript, buat kuki seperti berikut:

document.cookie="username=John Doe";

Anda juga boleh menambah Tamat tempoh masa (dalam masa UTC atau GMT). Secara lalai, kuki dipadamkan apabila penyemak imbas ditutup:

document.cookie="username=John Doe; expires=Thu, 18 Dis 2013 12:00:00 GMT";

Anda boleh menggunakan parameter laluan untuk memberitahu penyemak imbas laluan ke kuki. Secara lalai, kuki kepunyaan halaman semasa.

document.cookie="username=John Doe; expires=Kha, 18 Dis 2013 12:00:00 GMT; path=/";

Baca Kuki menggunakan JavaScript

Dalam JavaScript, anda boleh menggunakan kod berikut untuk membaca kuki:

var x = document.cookie;

Notedocument.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;

Ubah suai Kuki menggunakan JavaScript

Dalam JavaScript, mengubah suai kuki adalah serupa dengan mencipta kuki, seperti berikut:

document.cookie="username= John Smith; tamat tempoh=Kha, 18 Dis 2013 12:00:00 GMT;

Padam Kuki menggunakan JavaScript

Memadamkan kuki adalah mudah. Anda hanya perlu menetapkan parameter tamat tempoh kepada masa sebelumnya, seperti yang ditunjukkan di bawah, ditetapkan kepada Khamis, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires= Kha, 01 Jan 1970 00:00:00 GMT";

Perhatikan bahawa anda tidak perlu menyatakan nilai kuki apabila anda memadamkannya.

Cookie String

dokumen Atribut .cookie kelihatan seperti rentetan teks biasa, tetapi bukan

Walaupun anda menulis rentetan kuki yang lengkap dalam document.cookie, apabila anda membaca semula maklumat kuki, kuki itu akan. diubah. Maklumat dipaparkan sebagai pasangan nama/nilai

Jika anda menetapkan kuki baharu, kuki lama tidak akan ditimpa. Kuki baharu akan ditambahkan pada document.cookie, jadi jika anda membaca semula document.cookie anda akan mendapat data seperti ini:

cookie1=value; cookie2=value;

jika Anda perlukan untuk mencari nilai kuki tertentu, anda mesti mencipta fungsi JavaScript untuk mencari nilai kuki dalam rentetan kuki.

Contoh Kuki JavaScript

Dalam contoh berikut, kami akan mencipta kuki untuk menyimpan nama pelawat.

Pertama, pelawat melawat halaman web, dia akan diminta untuk mengisi namanya. Nama ini akan disimpan dalam kuki.

Pada kali seterusnya pelawat melawat halaman tersebut, dia akan melihat mesej alu-aluan.

Dalam contoh ini kita akan mencipta 3 fungsi JavaScript:

Fungsi untuk menetapkan nilai kuki

  1. Dapatkan Fungsi nilai kuki

  2. Fungsi untuk mengesan nilai kuki

    4. Fungsi untuk menetapkan nilai kuki
Mula-mula, kita buat Fungsi ialah digunakan untuk menyimpan nama pelawat:

function setCookie(cname,cvalue,exdays)

{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var tamat tempoh = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + tamat tempoh;
}

Analisis fungsi:

Dalam parameter fungsi di atas, nama kuki ialah cname, nilai kuki ialah cvalue dan masa tamat tempoh kuki itu ditetapkan .

Fungsi ini menetapkan nama kuki, nilai kuki dan masa tamat tempoh kuki.

Fungsi untuk mendapatkan nilai kuki

Kemudian, kami mencipta pengguna fungsi untuk mengembalikan nilai kuki yang ditentukan:

fungsi getCookie(cname)
{
nama var = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++ )
{
var c = ca[i].trim();
jika (c.indexOf(name)==0) kembalikan c.substring(name.length,c.length);
}
kembali "";
}

Analisis fungsi:

Parameter nama kuki ialah cname.

Buat pembolehubah teks untuk mendapatkan semula kuki yang ditentukan: cname + "=".

Gunakan titik bertitik untuk membelah rentetan document.cookie dan tetapkan tatasusunan rentetan pisah kepada ca (ca = document.cookie.split(';')).

Gelung melalui tatasusunan ca (i=0;i<ca.length;i++), kemudian baca setiap nilai dalam tatasusunan dan alih keluar ruang hadapan dan belakang (c=ca[i].trim()) .

Jika kuki ditemui (c.indexOf(name) == 0), kembalikan nilai kuki (c.substring(name.length,c.length).

Jika kuki tidak dijumpai, Mengembalikan "".

Fungsi untuk mengesan nilai kuki

Akhir sekali, kita boleh mencipta fungsi yang mengesan sama ada kuki telah dibuat

Jika kuki ditetapkan, ia akan dipaparkan Mesej ucapan

Jika tiada kuki ditetapkan, tetingkap pop timbul akan dipaparkan meminta nama pelawat, dan fungsi setCookie akan dipanggil untuk menyimpan. nama pelawat selama 365 hari:

function checkCookie()
{
var username=getCookie("username");
if (username!="")
{
alert("Selamat datang lagi " + nama pengguna);
}
lain
{
nama pengguna = prompt("Sila masukkan nama anda:","");
jika (nama pengguna!="" && nama pengguna!=null)
{
setCookie("nama pengguna",nama pengguna,365);
}
}
}

Contoh penuh

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function setCookie(cname,cvalue,exdays){
	var d = new Date();
	d.setTime(d.getTime()+(exdays*24*60*60*1000));
	var expires = "expires="+d.toGMTString();
	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].trim();
		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,30);
    	}
	}
}
</script>
</head>
	
<body onload="checkCookie()"></body>
	
</html>

<>Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Contoh berikut melaksanakan fungsi checkCookie() apabila halaman dimuatkan.

←