JavaScript中怎么創建cookie來存儲訪問者的名稱

今天小編給大家分享一下JavaScript中怎么創建cookie來存儲訪問者的名稱的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

訪客第一次到達網頁時，會要求他填寫姓名。然后將該名稱存儲在 cookie 中。

下次訪客到達同一頁時，他將收到一條歡迎消息。

例如，我們將創建 3 個JavaScript函數：

設置 cookie 值的函數

獲取 cookie 值的函數

檢查 cookie 值的函數

設置 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 的值：

實例

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

    } else {

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

    } else {

        user = prompt("Please enter your name:", "");

        if (user != "" && user != null) {

            setCookie("username", user, 365);

        }

    }

}

上面的例子會在頁面加載后運行 checkCookie() 函數。

以上就是“JavaScript中怎么創建cookie來存儲訪問者的名稱”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。