JavaScript Cookies

Cookie ຈະຫຼີກຫຼາຍຂໍ້ມູນຜູ້ນຳໃຊ້ໃນເວັບໄຊ.

ວ່າເປັນຫຍັງຈະແມ່ນ cookie?

Cookie ບັນທຶກຂໍ້ມູນໃນເອກະສານຂັ້ນນ້ອຍຢູ່ໃນຄອມພິວເຕີຂອງທ່ານ.

ບ່າງທີ່ web 服务器ສົ່ງເວັບໄຊໃຫ້ browser, ສາຍການເຊື່ອມຕໍ່ຈະຖືກປິດ, 服务器ຈະລຶບຂໍ້ມູນທັງໝົດຂອງຜູ້ນຳໃຊ້.

Cookie ໄດ້ຖືກສ້າງເພື່ອແກ້ໄຂ "ບວກວ່າຈະຮູ້ຂໍ້ມູນຜູ້ນຳໃຊ້"

  • ບ່າງທີ່ຜູ້ນຳໃຊ້ເຂົ້າມາເບິ່ງເວັບໄຊ, ຊື່ຂອງລາວສາມາດບັນທຶກໃນ cookie.
  • ຄັ້ງຫນຶ່ງທີ່ຜູ້ນຳໃຊ້ເຂົ້າມາເບິ່ງເວັບໄຊດັ່ງກ່າວ, cookie ຈະ "ຮູ້" ຊື່ຂອງລາວ.

Cookie ບັນທຶກໃນສັບພາສານວິທະຍາ, ອີງຕາມດັ່ງກ່າວ:

username = Bill Gates

ບ່າງທີ່ບູລາການຮຽກຮ້ອງເວັບໄຊຈາກບູລາສາຍ, cookie ທີ່ບັນຈຸກັບເວັບໄຊຈະຖືກເພີ່ມເຂົ້າໃນການຮຽກຮ້ອງດັ່ງກ່າວ. ດັ່ງນັ້ນ, ບູລາສາຍຈະມີຂໍ້ມູນທີ່ຈຳເປັນທີ່ "ຮູ້" ຂໍ້ມູນຂອງຜູ້ນຳໃຊ້.

ຖ້າບູລາມີສະໜັບສະໜູນ cookie ໃນບູລາບໍ່ໄດ້, ບົດສະຫຼຸບທີ່ລົງມາຈະບໍ່ມີຜົນ.

ຜ່ານ JavaScript ສ້າງ cookie

JavaScript ສາມາດນຳໃຊ້: document.cookie ການສ້າງ, ອ່ານ, ແລະ ລຶບອາຊີບ cookie.

ຜ່ານ JavaScript, ທ່ານສາມາດສ້າງ cookie ອີກຄັນ:

document.cookie = "username=Bill Gates";

ທ່ານສາມາດເພີ່ມວັນທີທີ່ມີຜົນງານ (UTC Time) ໄດ້. ໂດຍປົກກະຕິ, cookie ຈະຖືກລຶບຕາຍໃນເວລາທີ່ປິດບູລາມີໄດ້:

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

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

ການຕັ້ງຄູ່ມູນ, ເຈົ້າສາມາດບອກໃຫ້ບາງຄອມມູນວ່າ cookie ກັບຫົນທາງໃດ. ປະຈຸບັນ, cookie ຈະຢູ່ໃນຫົນທາງຂອງໜ້າທີ່ປະຈຸບັນ.

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

ຈາກ JavaScript ເພື່ອອ່ານຄອບຄີ

ຈາກ JavaScript ເຈົ້າສາມາດອ່ານຄອບຄີເປັນກັບຄຳສັບສານນັ້ນ:

document.cookie var x = document.cookie;

ຈະກັບຄອບຄີທັງໝົດຄືກັນໃນຄຳແບບຫນັງໜຶ່ງ ເຊັ່ນ: cookie1=value; cookie2=value; cookie3=value;

ຈາກການນຳໃຊ້ JavaScript ເພື່ອປ່ຽນຄອບຄີ

ຈາກການນຳໃຊ້ JavaScript ເຈົ້າສາມາດປ່ຽນຄອບຄີເປັນກັບການສ້າງຄອບຄີກໍ່ຕາມ:

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

ຄອບຄີເກົ່າຈະຖືກປັບແປງ.

ລຶບຄອບຄີຜ່ານ JavaScript

ລຶບຄອບຄີຈະຫຼາຍຢ່າງງ່າຍຫນັງ:

ທັນໃດກໍ່ຕາມທີ່ຈະລຶບຄອບຄີ ເຈົ້າບໍ່ຈະຕ້ອງກໍານົດຄູ່ມູນຄອບຄີ: expires ຂຽນພາສາຫຼັງສັບສານໃຫ້ກາຍເປັນວັນໄປໄດ້:

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

ເຈົ້າຄວນກໍານົດຫົນທາງຄອບຄີເພື່ອຮັບປະກັນລຶບຄອບຄີທີ່ຖືກກົດຫາທັງໝົດ.

ຖ້າເຈົ້າບໍ່ກໍານົດຫົນທາງ ບາງຄອມມູນຄ່າຈະບໍ່ອະນຸຍາດໃຫ້ເຈົ້າລຶບຄອບຄີ.

ຄອບຄີສະຖານະ

document.cookie ປະກອບຄູ່ມູນດັ່ງທີ່ຄົນຈະຄິດວ່າມັນເປັນຄອບຄີທີ່ມີຈຸດສະຫຼາກທຳມະດາ. ແຕ່ບໍ່ແມ່ນນັ້ນ.

ເຖິງແມ່ນເຈົ້າຂຽນໃນ document.cookie ຂຽນຄອບຄີສະຖານະທີ່ສົມບູນ ເມື່ອເຈົ້າອ່ານອີກຄັ້ງ ເຈົ້າຈະເຫັນພຽງຊື່-ຄູ່ມູນດັ່ງນັ້ນ:

ຖ້າມີການຕັ້ງຄອບຄີກັບຄອບຄີໃໝ່ ຄອບຄີເກົ່າຈະບໍ່ຖືກປັບແປງ。ຄອບຄີໃໝ່ຈະຖືກເພີ່ມໃຫ້ໃນ document.cookie，ຖ້າເຈົ້າອ່ານ document.cookie ເຈົ້າຈະມີຫຍັງຄືກັນນັ້ນ:

cookie1 = value; cookie2 = value;
　 　 　

ຖ້າເຈົ້າຕ້ອງຄົ້ນຫາຄືນຄວາມສະແດງ cookie ທີ່ກໍານົດໄວ້ຄືນເບື້ອງນັ້ນຈະຕ້ອງຂຽນຫົວຂໍ້ JavaScript ທີ່ຄົ້ນຫາຄືນຄວາມສະແດງ cookie ທີ່ພາຍໃນຄືນສະແດງ cookie：

ຕົວຢ່າງຂອງ JavaScript Cookie：

ໃນຕົວຢ່າງດັ່ງກ່າວກ່າວໃຫ້ພວກເຮົາສ້າງ cookie ທີ່ບັນທຶກຊື່ຂອງຜູ້ຢືບຢັບຄົນຢ້ຽມມາຮອດຄອມພິວເຕີ້：

ເວລາທີ່ຜູ້ຢືບຢັບມາຮອດເວລາດັ່ງກ່າວຄືນຄັ້ງທຳອິດຈະຖືກຮຽກຮ້ອງໃຫ້ບັນທຶກຊື່ຂອງພວກເຂົາຫຼັງຈາກນັ້ນບັນທຶກຊື່ຂອງພວກເຂົາຄືນໃນ cookie：

ເວລາທີ່ຜູ້ຢືບຢັບມາຮອດເວລາດັ່ງກ່າວຄືນເບື້ອງນັ້ນຈະຮັບຂໍ້ຄວາມການຕຶງຕົວຢູ່ຫຼັງຄືນວິນິຍົມ：

ຕົວຢ່າງທີ່ພວກເຮົາຈະສ້າງ 3 ຫົວຂໍ້ JavaScript ທີ່：

  1. ຫົວຂໍ້ການຕິດຕັ້ງຄືນຄວາມສະແດງ cookie：
  2. ຫົວຂໍ້ການຄົ້ນຫາຄືນຄວາມສະແດງ cookie：
  3. ຫົວຂໍ້ການກວດສອບຄືນຄວາມສະແດງ cookie：

ຫົວຂໍ້ການຕິດຕັ້ງ 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=/";
}

ການອະທິບາຍຕົວຢ່າງ：

ປະສານຫົວຂໍ້ຂອງການຕິດຕັ້ງຂອງຫົວຂໍ້ຕາມການປະຊາຊົນວິນິຍົມແມ່ນ：cookie ຄືນຊື່ (cname)，cookie ຄືນຄວາມສະແດງ (cvalue)，ແລະ ຄືນການຫຼົງສະຫຼາກ cookie (exdays)。

ການຕິດຕັ້ງ cookie ຜ່ານການຕິດຕັ້ງຊື່ cookie、ຄືນຄວາມສະແດງ cookie ແລະ ຄືນການຫຼົງສະຫຼາກ cookie。

ຫົວຂໍ້ການຄົ້ນຫາ cookie：

ຫຼັງຈາກນັ້ນ，ພວກເຮົາສ້າງຫົວຂໍ້ຕອນກັບຄືນຄວາມສະແດງ cookie ທີ່ກໍານົດໄວ້：

ຄວາມຄົນ

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

ການອະທິບາຍຫົວຂໍ້ຕາມການປະຊາຊົນວິນິຍົມ：

ຕິດຕັ້ງ cookie ຄືກັບປະສານ (cname）。

ສ້າງພັນທະບັດ (name) ແລະ ຄວາມສະແດງທີ່ຈະຄົ້ນຫາ (CNAME”=”）。

ການກົດລະບຽບຄວາມສະແດງ cookie ຕາມການຄົ້ນຫາ cookie ທີ່ມີຄວາມສະແດງພິເສດເຊັ່ນ “$”。

ໃຊ້ການແຍກຄືນ 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(';');
    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);
    }
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

ຕັ້ງການທົດລອງດ້ວຍຕົວເອງ

ຄວາມປະກອບພາບທີ່ປະກົດຈະເລີ່ມຕົ້ນຫລັງຈາກການອອກໄປຂອງເວັບໄຊ checkCookie() ທີ່ປະກົດຈະເລີ່ມຕົ້ນ.