JS設定讀取刪除cookie及表單互動

標籤：use   使用者   remove   刪除   用戶端   val   儲存   www   user   

學習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及表單互動