En son web geliştirme öğreticiler
 

JavaScript Cookies


Cookies web sayfalarında kullanıcı bilgilerini saklamak edelim.


Nelerdir Cookies ?

Cookies bilgisayarınızda, küçük metin dosyaları saklanan veriler vardır.

Bir web sunucusu bir tarayıcı için bir web sayfası gönderdi, bağlantı kapatıldı ve sunucu kullanıcı hakkında her şeyi unutur edilir.

Cookies sorunu çözmek için icat edildi "how to remember information about the user" :

  • Bir kullanıcı bir web sayfasını ziyaret ettiğinde, adı bir saklanabilir cookie .
  • Kullanıcı sayfayı ziyaret dahaki sefere cookie "remembers" Adını.

Cookies gibi ad-değer çiftleri kaydedilir:

username = John Doe

Bir sunucudan bir tarayıcı isteği bir web sayfası, zaman cookies sayfasına ait isteğe eklenir. Bu şekilde sunucu için gerekli verileri alır "remember" kullanıcılar hakkında bilgi.


Oluşturma a Cookie JavaScript

JavaScript oluşturmak, okumak ve silmek cookies ile document.cookie özelliği.

JavaScript ile a cookie böyle oluşturulabilir:

document.cookie = "username=John Doe";

Ayrıca, bir son kullanma tarihi ekleyebilir (in UTC time) . Varsayılan olarak, the cookie tarayıcı kapatıldığında silinir:

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

Bir yol parametresi ile, hangi yolu tarayıcı söyleyebilir the cookie aittir. Varsayılan olarak, the cookie geçerli sayfaya aittir.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Oku a Cookie JavaScript

JavaScript ile cookies böyle okunabilir:

var x = document.cookie;

document.cookie tüm dönecektir cookies çok gibi bir dizede: cookie1=value; cookie2=value; cookie3=value; cookie1=value; cookie2=value; cookie3=value;


Değişim a Cookie JavaScript

JavaScript ile, değiştirebilir a cookie oluşturduktan aynı şekilde:

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Eski cookie üzerine yazılır.


Sil a Cookie JavaScript

Silme a cookie çok basittir. Sadece geçirilen tarihe parametreyi sona ayarlayın:

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

Belirttiğiniz gerekmez unutmayın a cookie Silerken değerini a cookie .


Cookie Dize

document.cookie özelliği normal bir metin dizesi gibi görünüyor. Ama bu değil.

Eğer bütün bir yazma bile cookie dize document.cookie tekrar dışarı okuduğunda, yalnızca bunun ad-değer çifti görebilirsiniz.

Yeni ayarlarsanız cookie , eski cookies yazılmaz. Yeni cookie eklenir document.cookie okumak eğer öyleyse, document.cookie tekrar gibi bir şey alacak:

cookie1 = value; cookie2 = value;

Bir belirtilen değerini bulmak istiyorsanız cookie , sen arar bir JavaScript işlevi yazmalısınız cookie değer cookie dize.


JavaScript Cookie Örneği

Takip etmek örnekte, yaratacak a cookie bir ziyaretçi adını depolar.

Bir ziyaretçi web sayfasına geldiğinde ilk kez kendi adına doldurmaları istenecektir. Adı daha sonra depolanan a cookie .

ziyaretçi aynı sayfaya eriştiği bir sonraki sefere, bir karşılama mesajı alacak.

Mesela biz 3 JavaScript işlevlerini oluşturur:

  1. Bir fonksiyon ayarlamak için cookie değeri
  2. Bir fonksiyon elde etmek cookie değeri
  3. Bir fonksiyon kontrol etmek cookie değeri

Bir İşlev ayarla a Cookie

İlk olarak, ziyaretçinin adını saklayan bir işlevi oluşturmak a cookie değişken:

Örnek

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

Örnek açıklanmıştır:

Fonksiyonun parametreleri yukarıda adı verilebilir cookie (cname) , değerine the cookie (cvalue) ve çerez sona yapılana kadar gün sayısı (exdays) .

Fonksiyon setleri a cookie birlikte ekleyerek cookiename , the cookie değerini ve dizeyi sona eriyor.


Bir İşlev Get a Cookie

Daha sonra, belirli bir değerini döndüren bir işlev oluşturmak cookie :

Örnek

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

Fonksiyon açıkladı:

Al the cookiename parametresi olarak (cname) .

Bir değişken oluşturma (name) aramak için metin ile (cname + "=") .

Bir dizi adı içine noktalı virgül Böl document.cookie ca (ca = document.cookie. split(';') ) .

Ca döngü array (i=0;i<ca.length;i++) , ve her bir değer okuma c=ca[i]) .

Eğer the cookie bulunan (c. indexOf(name) == 0) , değerini geri the cookie (c. substring(name.length,c.length) .

Eğer the cookie bulunmazsa, dönüş "" .


Bir İşlev kontrol etmek a Cookie

Son olarak, işlev oluşturmak checks eğer a cookie ayarlanır.

Eğer the cookie ayarlandığında bir selamlama gösterecektir.

Eğer the cookie ayarlı değil, bu kullanıcının adının soran bir komut istemi kutusu görüntüler ve kullanıcı adı saklayan cookie arayarak, 365 gün süreyle setCookie işlevini:

Örnek

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

Şimdi hep beraber

Örnek

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);
        }
    }
}
Kendin dene "

Yukarıdaki örnek çalışır checkCookie() sayfa yüklendiğinde fonksiyonu.