JS操作Cookies包括(讀取添加與刪除)

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一直都是簡單去js實現cookie的一些操作,今天把js對cookie作業系統的整理了一遍,包括:js讀取cookie,js添加cookie,js刪除cookie,樣本如下: 複製代碼代碼如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>cookie處理函數練習(為我所寫，非我所想:改善物件導向)</title>
<script language="JavaScript" type="text/javascript">
function addCookie(objName,objValue,objHours){//添加cookie
var str = objName + "=" + escape(objValue);
if(objHours > 0){//為0時不設定到期時間，瀏覽器關閉時cookie自動消失
var date = new Date();
var ms = objHours*3600*1000;
date.setTime(date.getTime() + ms);
str += "; expires=" + date.toGMTString();
}
document.cookie = str;
alert("添加cookie成功");
}
function getCookie(objName){//擷取指定名稱的cookie的值
var arrStr = document.cookie.split("; ");
for(var i = 0;i < arrStr.length;i ++){
var temp = arrStr[i].split("=");
if(temp[0] == objName) return unescape(temp[1]);
}
}
function delCookie(name){//為了刪除指定名稱的cookie，可以將其到期時間設定為一個過去的時間
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = name + "=a; expires=" + date.toGMTString();
}
//讀取出來所有的cookie字筗串了
function allCookie(){//讀取所有儲存的cookie字串
var str = document.cookie;
if(str == ""){
str = "沒有儲存任何cookie";
}
alert(str);
}
function $(m,n){
return document.forms[m].elements[n].value;
}
function add_(){
var cookie_name = $("myform","cookie_name");
var cookie_value = $("myform","cookie_value");
var cookie_expireHours = $("myform","cookie_expiresHours");
addCookie(cookie_name,cookie_value,cookie_expireHours);
}
function get_(){
var cookie_name = $("myform","cookie_name");
var cookie_value = getCookie(cookie_name);
alert(cookie_value);
}
function del_(){
var cookie_name = $("myform","cookie_name");
delCookie(cookie_name);
alert("刪除成功");
}
</script>
//添加cookie
function addCookie(name,value,expires,path,domain){
var str=name+"="+escape(value);
if(expires!=""){
var date=new Date();
date.setTime(date.getTime()+expires*24*3600*1000);//expires單位為天
str+=";expires="+date.toGMTString();
}
if(path!=""){
str+=";path="+path;//指定可訪問cookie的目錄
}
if(domain!=""){
str+=";domain="+domain;//指定可訪問cookie的域
}
document.cookie=str;
}
//取得cookie
function getCookie(name){
var str=document.cookie.split(";")
for(var i=0;i<str.length;i++){
var str2=str[i].split(”=”);
if(str2[0]==name)return unescape(str2[1]);
}
}
//刪除cookie
function delCookie(name){
var date=new Date();
date.setTime(date.getTime()-10000);
document.cookie=name+”=n;expire=”+date.toGMTString();

[下面講的經個人覺得比較好哦！]
我們當然還得介紹cookie的四個屬性。這些屬性用下面的格式加到字串值後面：
name=<value>[; expires=<date>][; domain=<domain>][; path=<path>][; secure]
名稱=<值>[; expires=<日期>][; domain=<域>][; path=<路徑>][; 安全]
<value>, <date>, <domain> 和 <path> 應當用對應的值替換。<date> 應當使用GMT格式，可以使用Javascript指令碼語言的日期類Date的.toGMTString() 方法得到這一GMT格式的日期值。方括弧代表這項是可選的。比如在 [; secure]兩邊的方括弧代表要想把cookie設定成安全的，就需要把"; secure" 加到cookie字串值的後面。如果"; secure" 沒有加到cookie字串後面，那麼這個cookie就是不安全的。不要把角括弧<> 和方括弧[] 加到cookie裡（除非它們是某些值的內容）。設定屬性時，不限屬性，可以用任何順序設定。

下面是一個例子，在這個例子裡，cookie "username" 被設定成在15分鐘之後到期，可以被伺服器上的所有目錄訪問，可以被"mydomain.com"域裡的所有伺服器訪問，安全狀態為安全。複製代碼代碼如下:// Date() 的構造器設定以毫秒為單位
// .getTime() 方法返回時間，單位為毫秒
// 所以要設定15分鐘到期，要用60000毫秒乘15分鐘
var expiration = new Date((new Date()).getTime() + 15 * 60000);
document.cookie = "username=" + escape(form.username.value)+ "; expires ="
+ expiration.toGMTString() + "; path=" + "/" + "; _
domain=" + "mydomain.com" + "; secure";
// 我們定義一個函數，用來讀取特定的cookie值。［得到指定名字的cookie對象哦！］
function getCookie(cookie_name)
{
var allcookies = document.cookie;
var cookie_pos = allcookies.indexOf(cookie_name);
// 如果找到了索引，就代表cookie存在，
// 反之，就說明不存在。
if (cookie_pos != -1)
{
// 把cookie_pos放在值的開始，只要給值加1即可。
cookie_pos += cookie_name.length + 1;
var cookie_end = allcookies.indexOf(";", cookie_pos);
if (cookie_end == -1)
{
cookie_end = allcookies.length;
}
var value = unescape(allcookies.substring(cookie_pos, cookie_end));
}
return value;
}
// 調用函數
var cookie_val = getCookie("username");

3.為什麼我設定了cookie的到期時間如果為關閉的時候就自動清空的話怎麼沒用呢？
來研究一下JSP操縱cookie?
Cookie概念:
Cookie的格式實際上是一段純文字資訊, 由伺服器隨著網頁一起發送到用戶端, 並儲存在用戶端硬碟中指定的目錄的. 大家都傳說Cookie會造成嚴重的安全威脅什麼的, 其實不是這麼回事情. 伺服器讀取Cookie的時候, 只能夠讀取到這個伺服器相關的資訊. 而且, 瀏覽器一般只允許存放300個Cookie, 每個網站最多存放20個, 而且, 每個Cookie的大小現在在4K, 根本不會佔用多少空間. 並且, Cookie是有時效性質的. 例如, 設定了Cookie的存活時間為1分鐘, 則一分鐘後這個Cookie就會被瀏覽器刪除
Cookie版本:
目前有兩個版本:
版本0 : 由Netscape公司制定的，也被幾乎所有的瀏覽器支援. Java中為了保持相容性, 目前只支援到版本0, Cookie的內容中不能空格，方括弧，圓括弧，等號（=），逗號，雙引號，斜杠，問號，@符號，冒號，分號。
版本1 : 根據RFC 2109文檔制定的. 放寬了很多限制. 上面所限制的字元都可以使用. 但為了保持相容性, 應該盡量避免使用這些特殊字元.
JSP中對Cookie的操作: 類型方法名方法解釋
String getComment() 返回cookie中注釋,如果沒有注釋的話將返回空值.
String getDomain() 返回cookie中Cookie適用的網域名稱. 使用getDomain() 方法可以指示瀏覽器把Cookie返回給同一域內的其他伺服器,而通常 Cookie只返回給與發送它的伺服器名字完全相同的伺服器。注意網域名稱必須以點開始
int getMaxAge() 返回Cookie到期之前的最大時間，以秒計算。
String getName() 返回Cookie的名字
String getPath() 返回Cookie適用的路徑。如果不指定路徑，Cookie將返回給當前頁面所在目錄及其子目錄下的所有頁面。
boolean getSecure() 如果瀏覽器通過安全性通訊協定發送cookies將返回true值，如果瀏覽器使用標準協議則返回false值。
String getValue() 返回Cookie的值。筆者也將在後面詳細介紹getValue/setValue。
int getVersion() 返回Cookie所遵從的協議版本。
void setComment(String purpose) 設定cookie中注釋
void setDomain(String pattern) 設定cookie中Cookie適用的網域名稱
void setMaxAge(int expiry) 以秒計算，設定Cookie到期時間。
void setPath(String uri) 指定Cookie適用的路徑。
void setSecure(boolean flag) 指出瀏覽器使用的安全性通訊協定，例如HTTPS或SSL。
void setValue(String newValue) cookie建立後設定一個新的值。
void setVersion(int v) 設定Cookie所遵從的協議版本
一個簡單的例子
1. 寫入Cookie --- writecookie.jsp
------------------------------------------------------------- 複製代碼代碼如下:<%@ page contentType="text/html; charset=ISO8859_1" %>
<%
Cookie _cookie=new Cookie("user_delfancom", "delfan");
_cookie.setMaxAge(30*60); // 設定Cookie的存活時間為30分鐘
response.addCookie(_cookie); // 寫入用戶端硬碟
out.print("寫Cookie完成");
%>

2. 讀取Cookie.jsp --- readcookie.jsp
------------------------------------------------------------- 複製代碼代碼如下:<%
Cookie cookies[]=request.getCookies(); // 將適用目錄下所有Cookie讀入並存入cookies數組中
Cookie sCookie=null;
String sname=null;
String name=null;
if(cookies==null) // 如果沒有任何cookie
out.print("none any cookie");
else
{
out.print(cookies.length + "<br>");
for(int i=0;i<cookies.length; i++) // 迴圈列出所有可用的Cookie
{
sCookie=cookies[i];
sname=sCookie.getName();
name = sCookie.getValue();
out.println(sname + "->" + name + "<br>");
}
}
%>

需要注意的兩個問題:
1. Cookie有個適用路徑的問題, 就是說如果 writecookie.jsp和readcookie.jsp要放在同意目錄下, 如果不在同一目錄下, 則寫的時候需要設定路徑,為readcookie.jsp所在的路徑.
2. 讀入Cookie數組的時候需要判斷是否為空白(null), 網上很多代碼都沒有寫出這一點.

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JS操作Cookies包括(讀取添加與刪除)

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support