cookie可以在用戶的瀏覽器中保存一些信息,比如用戶的用戶名,密碼等。今天這篇博文就說一說利用用原生的javascript代碼來設置cookie,讀取cookie,以及刪除cookie的方法。

js設置cookie,讀取cookie,刪除cookie的方法

什么是cookie ?

cookie:是記錄在用戶瀏覽器中的信息,通常情況下是以“鍵/值”的形式進行存儲的,可設置過期的時間.

如以下格式

name=mochu

name:為鍵名,也就是cookie記錄的變量名

mochu:為cookie記錄的值

當web頁面向服務器發出請求時,屬于此頁面的所有cookie信息,也一并上傳到服務器,服務器端可以通過對cookie的識別,來辨別出頁面的來源或是用戶的身份。

js創建 cookie 的方法

国产视频appjs中可以通過 document.cookie 來創建 cookie

方法1:

国产视频app可以直接創建一個 cookie

document.cookie = "Name=mochu";

方法2:

創建一個帶有過期時間的 cookie ,這里用的是 GMT 時間

document.cookie = "Name=mochu ; expires = Sat, 10 Aug 2019 08:55:38 GMT";

国产视频app注意:如果不設置過期時間,則在瀏覽器關閉時,cookie自動過期或刪除

方法3:

設置cookie的有效果路徑,默認情況下,cookie只對當前頁面有效果

path=/:表示cookie對web頁面所屬網站的全部頁面有效果,你也可以自定義其它路徑

document.cookie = "Name=mochu ; expires = Sat, 10 Aug 2019 08:55:38 GMT ;path=/";

自定義JS設置 cookie 的函數

函數代碼

function setCookie(name, value, time='',path='') {
    if(time && path){
        var strsec = time * 1000;
        var exp = new Date();
        exp.setTime(exp.getTime() + strsec * 1);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path="+path;
    }else if(time){
        var strsec = time * 1000;
        var exp = new Date();
        exp.setTime(exp.getTime() + strsec * 1);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    }else if(path){
        document.cookie = name + "=" + escape(value) + ";path="+path;
    }else{
        document.cookie = name + "=" + escape(value);
    }
}

函數調用

setCookie("Name", "mochu", 20);

參數:cookie名稱,cookie值,過期時間(秒為單為),路徑

js讀取 cookie 的方法

国产视频appjs 讀取cookie的方法也是要用到 document.cookie

如下代碼:

var x = document.cookie;

document.cookie,會以字符串的形式反回所有的cookie

例:

setCookie("Name", "mochu",20,'/');
setCookie("pass", "123", 20, '/');
var x = document.cookie;
console.log(x);

打印結果:

Name=mochu; pass=123

自定義js獲取 cookie 的函數

国产视频appdocument.cookie 獲取到的 cookie 都是字符串的形式,我們可以對其獲取的結果進行加工,來輸出指定的 cookie

function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)){
        return unescape(arr[2]);
    }else{
        return null;
    }
}

調用方法

console.log(getCookie('Name'));

打印結果:

mochu

js刪除 cookie 的方法

js 刪除cookie 的操作非常簡單,只要將 cookie 的過期時候設置成比當前時間小就可以了

自定義函數代碼:

function delCookie('Name'); {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    // 這里需要判斷一下cookie是否存在
    var c = getCookie(name);
    if (c != null){
        document.cookie = name + "=" + c + ";expires=" + exp.toGMTString();
    }
}

調用方式:

delCookie('Name');

javascript 操作 cookie 函數整理:

<script>
    //設置cookie
    //注意:過期時間的單位是秒
    function setCookie(name, value, time='',path='') {
        if(time && path){
            var strsec = time * 1000;
            var exp = new Date();
            exp.setTime(exp.getTime() + strsec * 1);
            document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path="+path;
        }else if(time){
            var strsec = time * 1000;
            var exp = new Date();
            exp.setTime(exp.getTime() + strsec * 1);
            document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
        }else if(path){
            document.cookie = name + "=" + escape(value) + ";path="+path;
        }else{
            document.cookie = name + "=" + escape(value);
        }
    }
    //獲取cookie
    function getCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg)){
            return unescape(arr[2]);
        }else{
            return null;
        }
    }
    //刪除cookie
    function delCookie(name) {
        var exp = new Date();
        exp.setTime(exp.getTime() - 1);
        // 這里需要判斷一下cookie是否存在
        var c = getCookie(name);
        if (c != null){
            document.cookie = name + "=" + c + ";expires=" + exp.toGMTString();
        }
    }
    //飛鳥慕魚博客
</script>