js如何在瀏覽器添加cookie（添加、獲取、刪除）

本文轉載自查看原文 2018-11-21 17:34 8055 javaScript

首先，簡單用js將cookie保存到瀏覽器中，具體可按F12在這里查看（火狐瀏覽器）

1、js腳本方法

1）添加cookie方法

      //添加cookie var addCookie = function (name, value, time) { var strSec = getSec(time); var exp = new Date(); exp.setTime(exp.getTime() + strSec * 1); //設置cookie的名稱、值、失效時間 document.cookie = name + "=" + value + ";expires="+ exp.toGMTString(); }

2）獲取cookie方法

    //獲取cookie var getCookie = function (name) { //獲取當前所有cookie var strCookies = document.cookie; //截取變成cookie數組 var array = strCookies.split(';'); //循環每個cookie for (var i = 0; i < array.length; i++) { //將cookie截取成兩部分 var item = array[i].split("="); //判斷cookie的name 是否相等 if (item[0] == name) { return item[1]; } } return null; }

3）刪除cookie方法

   //刪除cookie var delCookie = function (name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); //獲取cookie是否存在 var value = getCookie(name); if (value != null) { document.cookie = name + "=" + value + ";expires="+ exp.toUTCString(); } }

4）計算cookie毫秒方法

    //獲取時間的秒數（參數：d，h,m,s） 12m var getSec = function(str){ var str1 = str.substr(0, str.length - 1); //時間數值 var str2 = str.substr(str.length-1, 1); //時間單位 if (str2 == "s") { return str1 * 1000; } else if (str2 == "m") { return str1 * 60 * 1000; } else if (str2 == "h") { return str1 * 60 * 60 * 1000; } else if (str2 == "d") { return str1 * 24 * 60 * 60 * 1000; } }

5）頁面調用方法

var addCookieFun = function(){ var cookie_key = document.getElementById("cookie_key").value; var cookie_val = document.getElementById("cookie_val").value; var cookie_time = document.getElementById("cookie_time").value; addCookie(cookie_key,cookie_val,cookie_time); alert("添加cookie："+ cookie_key); } var chkCookieFun = function(){ var cookie_key = document.getElementById("cookie_key").value; var result = getCookie(cookie_key); if(result!=null){ alert("存在cookie:"+ cookie_key); }else{ alert("不存在cookie:"+cookie_key); } } var delCookieFun = function(){ var cookie_key = document.getElementById("cookie_key").value; delCookie(cookie_key); alert("刪除cookie："+ cookie_key); }

2、html界面如下

<body> <label>cookie名：</label><input id="cookie_key" type="text" /> <br/> <label>cookie值：</label><input id="cookie_val" type="text" /> <br/> <label>失效時間：</label><input id="cookie_time" type="text" title="時間格式（10s,2m等）" /> <br/> <br/> <input type="button" value="添加cookie" onClick ="addCookieFun()"/> &nbsp; &nbsp; <input type="button" value="檢查cookie" onClick ="chkCookieFun()"/> &nbsp; &nbsp; <input type="button" value="刪除cookie" onClick ="delCookieFun()"/> &nbsp; &nbsp; </body>