JavaScript Cookies

Ang cookie ay nagbibigay-daan sa iyong pag-iimbak ng impormasyon ng user sa pahina.

Ano ang cookie?

Ang cookie ay mga datos na inilagay sa maliliit na teksto file sa iyong kompyuter.

Kapag inihahalal ang pahina ng web server sa browser, ang koneksyon ay nagsasara, at ang server ay mawawala ang lahat ng impormasyon ng user.

Ang cookie ay nilikha upang malutas ang tanong kung paano alalahanin ang impormasyon ng user:

  • Kapag dumalaw ang user sa pahina, ang kanyang pangalan ay maaaring ilagay sa cookie.
  • Kapag bumalik ang user sa pahina, ang cookie ay "alalahanin" ang kanyang pangalan.

Ang cookie ay inilagay sa parangal na halimbawa:

username = Bill Gates

Kapag hiniling ng browser ang isang pahina mula sa server, ang cookie na may kinalaman sa pahina ay idinagdag sa kahilingan. Sa ganito, ang server ay nakakakuha ng pangangailangan na data upang "alalahanin" ang impormasyon ng user.

Kung ang lokal na suporta ng cookie ng browser ay naka-close, ang mga halimbawa na ito ay hindi gumagana.

Sa pamamagitan ng JavaScript, maglikha ng cookie.

Maaaring gamitin ng JavaScript: document.cookie Paglikha, pagbasa, at pagtanggal ng cookie sa mga attribute.

Sa pamamagitan ng JavaScript, ganoon ang paglikha ng cookie:

document.cookie = "username=Bill Gates";

Maaari mong magdagdag ng tapos ng petsa (UTC oras). Ang default, ang cookie ay nililinis kapag nagsasara ang browser:

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

Sa pamamagitan ng path Mga parameter, maaring sabihin mo sa browser kung anong lansangan ang cookie. Sa pangkaraniwang, ang cookie ay nauukol sa kasalukuyang pahina.

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

Basahin ang cookie sa pamamagitan ng JavaScript

Sa pamamagitan ng JavaScript, maaari mong basahin ang cookie tulad nito:

var x = document.cookie;

document.cookie Magbibigay ng lahat ng cookie sa isang string, tulad ng: cookie1=value; cookie2=value; cookie3=value;

Palitan ang cookie sa pamamagitan ng JavaScript

Sa pamamagitan ng paggamit ng JavaScript, madaling mapalitan mo ito sa paraan kung paano mo ito nilikha:

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

Ang lumang cookie ay napalitan.

Aalisin ang cookie sa pamamagitan ng JavaScript

Ang pag-aalis ng cookie ay napakasimple.

Hindi kailangan mo ituturing ang halaga ng cookie kapag aalisin ito:

Papalitan direktang ang expires Para sa mga parameter, mag-set lamang ng petsa sa nakaraan:

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

Dapat mong itakda ang lansangan ng cookie upang siguraduhin na alisin ang tamang cookie.

Kung hindi mo ituturing ang lansangan, ang ilang mga browser ay hindi pahihintulutan ka na alisin ang cookie.

Cookie string

document.cookie Ang propetya ay mukhang isang normal na text string. Pero hindi ito.

Kahit ka'y nagsusumite sa document.cookie Isulat ang kumpletong cookie string, kapag ibabalik na basahin, makikita mo lamang ang pares ng pangalan-halaga nito.

Kung naitset ang bagong cookie, ang lumang cookie ay hindi na papalitan. Ang bagong Cookie ay magiging kasama sa document.cookie, kaya't kapag nabasa mo ang document.cookie, ang natutunan mo ay magiging tulad nito:

cookie1 = value; cookie2 = value;
　 　 　

Kung gusto mong hanapin ang halaga ng isang tinukoy na cookie, dapat mong iskrip ang JavaScript function na naghahanap sa string ng cookie.

Halimbawa ng JavaScript Cookie

Sa ibang pagkakataon, lumikha kami ng cookie upang imbakin ang pangalan ng visitor.

Unang makikita ng visitor ang webpage, hinilingan siya na magbigay ng kanyang pangalan. Pagkatapos, iimbak ang pangalan sa cookie.

Kapag dumating muli ang visitor sa parehong pahina, makakatanggap siya ng isang mensahe ng pagbati.

Halimbawa, lumikha kami ng tatlong JavaScript function:

  1. Function na nagtatakda ng halaga ng cookie
  2. Function na nagbibigay ng halaga ng cookie
  3. Function na nagpapatotoo ng halaga ng cookie

Function na nagtatakda ng cookie

Unang makikita ng visitor ang webpage, hinilingan siya na magbigay ng kanyang pangalan. Pagkatapos, iimbak ang pangalan sa cookie.

halimbawa

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

Paliwanag ng halimbawa:

Ang argumento ng function na ito ay: pangalan ng cookie (cname), halaga ng cookie (cvalue), at ang bilang ng araw na magtatapos ang cookie (exdays).

Ang function na ito ay nagtatakda ng cookie sa pamamagitan ng pagsasama ng pangalan ng cookie, halaga ng cookie at string ng pagtatapos ng cookie.

Function na nagbibigay ng cookie

Pagkatapos, lumikha kami ng isang function na ibabalik ang halaga ng tinukoy na cookie:

halimbawa

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

Paliwanag ng function:

Iminom ang cookie bilang argumento (cname).

Lumikha ng variable (name) at ang teksto na ihahanap (CNAME”=”).

Dekode ang string ng cookie, hawakan ang cookie na may partikular na character, halimbawa, “$”.

Gamitin ang pahina para huwag mapaghiwalay ang document.cookie sa isang array na may pangalan na ca (decodedCookie.split(';')).

surikatan ang array na ca (i = 0; i < ca.length; i++), at basahin ang bawat halaga c = ca[i].

kung natagpuan ang cookie (c.indexOf(name) == 0), ibabalik ang halaga ng cookie (c.substring(name.length, c.length)).

kung hindi natagpuan ang cookie, ibabalik "".

Function na para suriin ang cookie

Sa wakas, gumawa kami ng isang function na para suriin kung ang cookie ay naitakda.

kung na ito ay naitakda ang cookie, ay magpakita ng isang paggutom ng paggaling.

kung hindi ito ay naitakda ang cookie, ay magpakita ng isang pop-up na nagtatanong ng pangalan ng user, at itatatag ang cookie ng pangalan ng user sa loob ng 365 araw, sa pamamagitan ng pagtawag sa setCookie Function:

halimbawa

function checkCookie() {
    var username = getCookie("username");
    kung ang username ay hindi "") {
        alert("Welcome again " + username);
    }
        username = prompt("Plese enter your name:", "");
        kung ang username ay hindi "" at hindi null) {
            setCookie("username", username, 365);
        }
    }
}

ngayon ay pinagsama-sama

halimbawa

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(';');
    magtatanggal 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() 函数。