前端基礎（七） cookie操作

字數：1293

cookie語法：

cookie:

cookie:name=value;

cookie:name=value; name1=value1; name2=value2

在使用cookie之前，我們先清晰乙個概念：cookie是http請求的請求首部屬性之一，是通過服務端或者指令碼設定的儲存於瀏覽器客戶端中的資訊。如果使用者手動在瀏覽器中設定了禁用cookie，我們就無法使用它了。

它的語法就是一系列的名稱值對用=操作符連線，然後每一對名稱值對之間使用分號+空格隔開。

因瀏覽器同源策略，我們是無法跨域操作cookie的。

我們會用它儲存一些簡單的臨時的資訊，例如登入令牌。

##js中操作cookie

在js中，我們可以通過document全域性物件提供的介面來操作cookie。

語法：

let strcookies = document.cookie; //獲取cookie

document.cookie = strcookies; //更新cookie

strcookies的值就是上述的cookie語法形式。不過屬性值後面可以跟上如下配置資料，使用分號為分隔。

-;path=path配置cookie的路徑，預設為當前文件的路徑。document.cookie可以獲取到當前路徑和子路徑的資訊。

-domain=domain配置cookie的網域名稱，預設為當前域。document.cookie無法獲取不同域的資訊。

-max-age=max-age-in-seconds設定當前cookie的保留時間，單位為妙，預設cookie會在當前會話關閉（即瀏覽器關閉）時失效。

-expires=date-in-gmtstring-format設定當前cookie保留到哪個時間點，接收gmtstring的日期格式資料，預設cookie會在當前會話關閉（即瀏覽器關閉）時失效。

-;secure設定cookie在https時才生效。

這裡，我們要注意一下幾點：

①cookie的值中是不允許出現任何逗號、分號或空格，所以cookie值可以使用encodeuricomponent()來轉換一次。

②max-age是在http1.1中用來取代expires出現的新屬性，ie9以下不支援max-age。當同時存在max-age和expires時，會自動忽略掉expires。因此，這裡建議兩個屬性都維護一下。

下面，我們引用mdn中的乙個操作cookie的示例為例，嘗試一下cookie的正確操作方式。

var cookieoper =  skey cookie名稱
* @return       cookie值
*/getitem: function (skey) 
return
decodeuricomponent(document.cookie.replace(new
regexp('(?:(?:^|.*;)\\s*' + encodeuricomponent(skey).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1')) || null;
},/**
* 設定cookie值
* @param  skey    cookie名稱
* @param  svalue  cookie值
* @param  vend    保留時間
* @param  spath   路徑
* @param  sdomain 域
* @param  bsecure 是否開啟安全協議
*/setitem: function (skey, svalue, vend, spath, sdomain, bsecure) 
var ***pires = '';
if (vend) 
}document.cookie = encodeuricomponent(skey) + '=' + encodeuricomponent(svalue) + ***pires + (sdomain ? '; domain=' + sdomain : '') + (spath ? '; path=' + spath : '') + (bsecure ? '; secure' : '');
return
true;
},/**
* 刪除cookie
* @param   skey    cookie名稱
* @param   spath   路徑
* @param   sdomain 域
*/removeitem: function (skey, spath, sdomain) 
document.cookie = encodeuricomponent(skey) + '=; expires=thu, 01 jan 1970 00:00:00 gmt' + (sdomain ? '; domain=' + sdomain : '') + (spath ? '; path=' + spath : '');
return
true;
},/**
* 是否擁有對應名稱的cookie
* @param    skey cookie名稱
* @return       是否擁有cookie
*/hasitem: function (skey) 
return (new
regexp('(?:^|;\\s*)' + encodeuricomponent(skey).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=')).test(document.cookie);
},/**
* 獲取所有cookie名稱
* @return  名稱集合
*/keys: function () 
return akeys;
}};複製**

其他的都好理解，需要注意的是，刪除cookie是設定cookie過時即可，並非我們慣性的刪除操作。然後設定cookie的名稱和值的時候注意使用encodeuricomponent方法轉換一下。

使用不同的引數測試介面結果如下：

= "key1=value1"
cookieoper.setitem('key1', 'value1');
= "key1=value1; key2=value2"
//一分鐘到期
cookieoper.setitem('key2', 'value2', 60);
= "key1=value1; key2=value2"
//無法通過 document.cookie 獲取到不同路徑下的cookie資訊，
//但是可以獲取到當前路徑下子目錄的資訊
cookieoper.setitem('key3', 'value3', null, '/dir/');
//刪除失敗
cookieoper.removeitem('key3', '/dir/');
= "key1=value1; key2=value2"
//當前域中的cookie不會變化
cookieoper.setitem('key4', 'value4', null, null, '11.lp');
= "key1=value1; key2=value2"
//由於當前位址並沒有使用https，所以cookie設定無法生效。
cookieoper.setitem('key4', 'value4', null, null, null, true);
複製**

①由於使用者可以設定禁用cookie，所以在使用cookie時，我們需要考慮到這種情況。

②不要跨域使用cookie。

③對於https協議的網頁，我們需要加上secure引數。

④最好是同時維護好max-age和expires。

⑤設定cookie名稱和值的時候，使用encodeuricomponent函式轉換一下。

參考資料

前端基礎（七） cookie操作

前端 cookie，小餅乾

Cookie程式設計基礎檢視Cookie

前端把cookie寫在父域裡 cookie筆記

前端基礎（七） cookie操作

前端 cookie，小餅乾

Cookie程式設計基礎 檢視Cookie

前端把cookie寫在父域裡 cookie筆記

相關推薦

Cookie程式設計基礎檢視Cookie