JS設置讀取刪除cookie及表單交互
阿新 • • 發佈:2017-06-13
password ron log getdate date() 一個 func sca 過期
學習cookie和表單交互留下的一點筆記
什麽是cookie?
cookie 是存儲於客戶端的變量。當設備請求頁面時,就會發送cookie。
首先需要稍微了解一下cookie的結構,簡單地說:cookie是以鍵值對的形式保存的,即key=value的格式。各個cookie之間一般是以“;”分隔。
JS設置cookie:
document.cookie= key + ‘=‘ + value + ‘;expires=‘ + Date;
其中Date為cookie的過期時間。
實際案例:
//setCookie是一個設置Cookie的函數 //c_name參數設置key的值,value設置value的值,expiredays設置多少天後過期function setCookie(c_name,value,expiredays){ var exdate = new Date() exdate.setDate(exdate.getDate()+expiredays) //判斷c_name,value為空時,expires=也為空 document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) }
讀取cookie:
function getCookie(name){var arr=document.cookie.split(‘; ‘); for(var i=0;i<arr.length;i++){ var arr2=arr[i].split(‘=‘); if(arr2[0]==name){ return arr2[1]; } } return ‘‘; }
刪除cookie就直接在setCookie的基礎上,expiredays-1
function removeCookie(name){ setCookie(name, 1, -1); }
那麽在表單交互中如何在表單中保存cookie呢?,如下是一個表單:
<form id="form1" action="http://www.baidu.com/">
用戶名:<input type="text" name="user" /><br>
密碼:<input type="password" name="password" /><br>
<input type="submit" value="登陸" />
</form>
將填寫好的表單保存為數組賦給cookie:
function onSubmit(){ var finalRes = $(#form1 :input).serializeArray().reduce(function(result, item){ result[item.name] = item.value; return result; }, {}) // 保存cookie var oDate = new Date(); //設置過期時間為14天後 oDate.setDate(oDate.getDate()+14); for (x in finalRes) { document.cookie = x+‘=‘+ finalRes[x]+‘;expires=‘+oDate ; } }
關於表單交互詳細可以看一下推酷的這篇文章:
由form表單來說說前後臺數據之間的交互
JS設置讀取刪除cookie及表單交互