cookie可以在用戶的瀏覽器中保存一些信息，比如用戶的用戶名，密碼等。今天這篇博文就說一說利用用原生的JAVAscript代碼來設置cookie，讀取cookie，以及刪除cookie的方法。
什么是cookie ？
cookie：是記錄在用戶瀏覽器中的信息，通常情況下是以“鍵/值”的形式進行存儲的，可設置過期的時間.
如以下格式
name=mochu
name：為鍵名，也就是cookie記錄的變量名
mochu：為cookie記錄的值
當web頁面向服務器發出請求時，屬于此頁面的所有cookie信息，也一并上傳到服務器，服務器端可以通過對cookie的識別，來辨別出頁面的來源或是用戶的身份。
js創建 cookie 的方法
js中可以通過 document.cookie 來創建 cookie
方法1：
可以直接創建一個 cookie
document.cookie = "Name=mochu";
方法2：
創建一個帶有過期時間的 cookie ，這里用的是 GMT 時間
document.cookie = "Name=mochu ; expires = Sat, 10 Aug 2019 08:55:38 GMT";
注意：如果不設置過期時間，則在瀏覽器關閉時，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 的方法
js 讀取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 的函數
document.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>
