JavaScript Cookies

Kuki membolehkan anda simpan maklumat pengguna di halaman web.

Apakah kuki?

Kuki adalah data yang disimpan di dalam fail teks kecil di komputer anda.

Ketika pelayan web menghantar halaman web kepada pelayar, sambungan disegel, dan pelayan akan lupa tentang segala sesuatu pengguna.

Kuki diciptakan untuk menyelesaikan masalah "bagaimana mengingat maklumat pengguna".

  • Ketika pengguna mengunjungi halaman web, namanya boleh disimpan di kuki.
  • Ketika pengguna mengunjungi halaman itu sekali lagi, kuki akan "ingat" namanya.

Kuki disimpan dalam pasangan nama dan nilai, seperti:

username = Bill Gates

Ketika pelayar meminta halaman daripada pelayan, kuki yang terletak di halaman itu akan ditambah ke permintaan itu. Dengan itu, pelayan mendapat data yang perlu untuk "ingat" maklumat pengguna.

Jika pelayar sudah menonaktifkan sokongan kuki lokal, contoh di bawah ini tidak akan berfungsi.

Membuat kuki melalui JavaScript

JavaScript boleh digunakan untuk document.cookie Ciri-ciri untuk membuat, baca, dan hapus kuki.

Dengan JavaScript, anda boleh membuat kuki seperti ini:

document.cookie = "username=Bill Gates";

Anda boleh menambah tarikh berlaku (waktu UTC). Secara lalai, kuki akan dipadamkan apabila pelayar ditutup:

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC";

Dengan path Parameter, anda dapat memberitahu pelayar kuki milik laluan mana. Secara lalai, kuki milik halaman saat ini.

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

Membaca kuki melalui JavaScript

Dengan JavaScript, anda dapat membaca kuki seperti ini:

var x = document.cookie;

document.cookie Akan mengembalikan semua kuki dalam satu string, seperti: cookie1=value; cookie2=value; cookie3=value;

Mengubah kuki melalui JavaScript

Dengan menggunakan JavaScript, anda dapat mengubahnya seperti yang anda buat kuki:

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

Kuki lama akan dihapus.

Menghapus kuki melalui JavaScript

Penghapusan kuki sangat mudah.

Tidak perlu menentukan nilai kuki saat menghapus kuki:

Langsung buang expires Parameter dapat diset ke tanggal lalu:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Anda seharusnya mendefinisikan laluan kuki untuk memastikan penghapusan kuki yang benar.

Jika anda tidak menentukan laluan, beberapa pelayar akan menolak anda untuk menghapus kuki.

String kuki

document.cookie Properti ini kelihatan seperti string teks normal. Tetapi bukan.

Walaupun anda mengisi document.cookie Tulis string kuki penuh, saat dibaca kembali, anda hanya dapat melihat pasangan nama-nilai nya.

Jika diatur kuki baru, kuki lama tidak akan dihapus. Kuki 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 mencari 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 cipta 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 sekali lagi ke halaman yang sama, dia akan menerima pesan selamat datang.

Contoh, kita akan cipta 3 fungsi JavaScript:

  1. Fungsi untuk menetapkan nilai cookie
  2. Fungsi untuk mendapatkan nilai cookie
  3. Fungsi untuk memeriksa nilai cookie

Fungsi untuk menetapkan cookie

Pertama, kita cipta fungsi yang menyimpan nama pengunjung di variabel cookie:

实例

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=/";
}

Pengertian contoh:

Parameter fungsi di atas adalah: nama cookie (cname), nilai cookie (cvalue), dan bilangan hari kadaluwarsa cookie.

Fungsi ini menetapkan cookie dengan menambahkan nama cookie, nilai cookie, dan string kadaluwarsa.

Fungsi untuk mendapatkan cookie

Lalu, kita cipta fungsi yang mengembalikan nilai cookie yang ditentukan:

实例

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 "";
}

Pengertian fungsi:

Jadikan cookie sebagai parameter (cname).

Cipta variabel (name) dan teks yang akan dicari (CNAME”=”).

Dekodkan string cookie, memproses cookie yang mempunyai aksara khas seperti “$”.

用分号把 document.cookie 拆分到名为 ca（decodedCookie.split(';')）的数组中。

遍历 ca 数组（i = 0; i < ca.length; i++），然后读出每个值 c = ca[i]。

如果找到 cookie（c.indexOf(name) == 0），则返回该 cookie 的值（c.substring(name.length, c.length）。

如果未找到 cookie，则返回 ""。

检测 cookie 的函数

最后，我们创建检查 cookie 是否设置的函数。

如果已设置 cookie，将显示一个问候。

如果未设置 cookie，会显示一个提示框，询问用户的名字，并存储用户名 cookie 365 天，通过调用 setCookie 函数：

实例

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);
        }
    }
}

现在组合起来

实例

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("Welcome again " + user);
    }
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

亲自试一试

上面的例子会在页面加载后运行 checkCookie() 函数。