javascript學習筆記（七）利用javascript來創(chuàng)建和存儲cookie
更新時間：2011年04月08日 00:31:54 作者：
今天把javascript如何用來創(chuàng)建及存儲cookie復習了一下，其中的一點體會拿出來和大家討論，懇請高手指點一二。
首先看一下基礎(chǔ)知識：
1、什么是cookie
cookie 是存儲于訪問者的計算機中的變量。每當同一臺計算機通過瀏覽器請求某個頁面時，就會發(fā)送這個 cookie。你可以使用 JavaScript 來創(chuàng)建和取回 cookie 的值
2、有關(guān)cookie的例子：
•名字 cookie 當訪問者首次訪問頁面時，他或她也許會填寫他/她們的名字。名字會存儲于 cookie 中。當訪問者再次訪問網(wǎng)站時，他們會收到類似 "Welcome John Doe!" 的歡迎詞。而名字則是從 cookie 中取回的。
•密碼 cookie 當訪問者首次訪問頁面時，他或她也許會填寫他/她們的密碼。密碼也可被存儲于 cookie 中。當他們再次訪問網(wǎng)站時，密碼就會從 cookie 中取回。
•日期 cookie 當訪問者首次訪問你的網(wǎng)站時，當前的日期可存儲于 cookie 中。當他們再次訪問網(wǎng)站時，他們會收到類似這樣的一條消息："Your last visit was on Tuesday August 11, 2005!"。日期也是從 cookie 中取回的。
下面來創(chuàng)建一個cookie的實例，如何來創(chuàng)建cookie及取出cookie
javascript部分代碼：
//創(chuàng)建cookie
function setCookie(name, value, expireday) {
var exp = new Date();
exp.setTime(exp.getTime() + expireday*24*60*60*1000); //設(shè)置cookie的期限
document.cookie = name+"="+escape(value)+"; expires"+"="+exp.toGMTString();//創(chuàng)建cookie
}
//提取cookie中的值
function getCookie(name) {
var cookieStr = document.cookie;
if(cookieStr.length > 0) {
var cookieArr = cookieStr.split(";"); //將cookie信息轉(zhuǎn)換成數(shù)組
for (var i=0; i<cookieArr.length; i++) {
var cookieVal = cookieArr[i].split("="); //將每一組cookie(cookie名和值)也轉(zhuǎn)換成數(shù)組
if(cookieVal[0] == name) {
return unescape(cookieVal[1]); //返回需要提取的cookie值
}
}
}
}
//測試cookie
function checkCookie() {
var cookieUser = document.getElementById("cookieUser");
var userName = getCookie("userName");
if(userName) {
cookieUser.innerHTML = "您好"+userName+"，歡迎再次回來！";
} else {
var value = prompt("請輸入用戶名", "");
if(value) {
setCookie('userName', value, 1);
} else {
alert("請輸入用戶名！");
}
}
}
主要在于如何提取我們需要的cookie信息，在本例的getCookie函數(shù)中主要是將cookie信息轉(zhuǎn)化成數(shù)組的方式來查找我們需要提取的cookie值。還可以通過正則表達式的方式來匹配，如下：
function getCookie(name) {
var cookieStr = document.cookie;
var cookieArr = cookieStr.match(new RegExp(name+"=[a-zA-Z0-9]*;$"));
var cookieVal = cookieArr.split("=");
if(cookieVal[0] == name) {
return unescape(cookieVal[1]);
}
}
比如在這個例子中，如果打開瀏覽器中沒有存儲名為userName的cookie，則會提示用戶輸入用戶名，再次刷新頁面時則會顯示輸入的cookie值。
最后我們可以測試一下代碼：
<body onload="checkCookie()">
<p id="cookieUser"></p>
</body>
1、什么是cookie
cookie 是存儲于訪問者的計算機中的變量。每當同一臺計算機通過瀏覽器請求某個頁面時，就會發(fā)送這個 cookie。你可以使用 JavaScript 來創(chuàng)建和取回 cookie 的值
2、有關(guān)cookie的例子：
•名字 cookie 當訪問者首次訪問頁面時，他或她也許會填寫他/她們的名字。名字會存儲于 cookie 中。當訪問者再次訪問網(wǎng)站時，他們會收到類似 "Welcome John Doe!" 的歡迎詞。而名字則是從 cookie 中取回的。
•密碼 cookie 當訪問者首次訪問頁面時，他或她也許會填寫他/她們的密碼。密碼也可被存儲于 cookie 中。當他們再次訪問網(wǎng)站時，密碼就會從 cookie 中取回。
•日期 cookie 當訪問者首次訪問你的網(wǎng)站時，當前的日期可存儲于 cookie 中。當他們再次訪問網(wǎng)站時，他們會收到類似這樣的一條消息："Your last visit was on Tuesday August 11, 2005!"。日期也是從 cookie 中取回的。
下面來創(chuàng)建一個cookie的實例，如何來創(chuàng)建cookie及取出cookie
javascript部分代碼：
復制代碼 代碼如下:
//創(chuàng)建cookie
function setCookie(name, value, expireday) {
var exp = new Date();
exp.setTime(exp.getTime() + expireday*24*60*60*1000); //設(shè)置cookie的期限
document.cookie = name+"="+escape(value)+"; expires"+"="+exp.toGMTString();//創(chuàng)建cookie
}
//提取cookie中的值
function getCookie(name) {
var cookieStr = document.cookie;
if(cookieStr.length > 0) {
var cookieArr = cookieStr.split(";"); //將cookie信息轉(zhuǎn)換成數(shù)組
for (var i=0; i<cookieArr.length; i++) {
var cookieVal = cookieArr[i].split("="); //將每一組cookie(cookie名和值)也轉(zhuǎn)換成數(shù)組
if(cookieVal[0] == name) {
return unescape(cookieVal[1]); //返回需要提取的cookie值
}
}
}
}
//測試cookie
function checkCookie() {
var cookieUser = document.getElementById("cookieUser");
var userName = getCookie("userName");
if(userName) {
cookieUser.innerHTML = "您好"+userName+"，歡迎再次回來！";
} else {
var value = prompt("請輸入用戶名", "");
if(value) {
setCookie('userName', value, 1);
} else {
alert("請輸入用戶名！");
}
}
}
主要在于如何提取我們需要的cookie信息，在本例的getCookie函數(shù)中主要是將cookie信息轉(zhuǎn)化成數(shù)組的方式來查找我們需要提取的cookie值。還可以通過正則表達式的方式來匹配，如下：
復制代碼 代碼如下:
function getCookie(name) {
var cookieStr = document.cookie;
var cookieArr = cookieStr.match(new RegExp(name+"=[a-zA-Z0-9]*;$"));
var cookieVal = cookieArr.split("=");
if(cookieVal[0] == name) {
return unescape(cookieVal[1]);
}
}
比如在這個例子中，如果打開瀏覽器中沒有存儲名為userName的cookie，則會提示用戶輸入用戶名，再次刷新頁面時則會顯示輸入的cookie值。
最后我們可以測試一下代碼：
復制代碼 代碼如下:
<body onload="checkCookie()">
<p id="cookieUser"></p>
</body>
您可能感興趣的文章:
- javascript創(chuàng)建cookie、讀取cookie
- asp.net通過js實現(xiàn)Cookie創(chuàng)建以及清除Cookie數(shù)組的代碼
- 什么是cookie?js手動創(chuàng)建和存儲cookie
- javascript創(chuàng)建和存儲cookie示例
- JavaScript創(chuàng)建、讀取和刪除cookie
- JavaScript創(chuàng)建一個歡迎cookie彈出窗實現(xiàn)代碼
- JS設(shè)置cookie、讀取cookie、刪除cookie
- JS操作Cookies包括(讀取添加與刪除)
- JS保存和刪除cookie操作 判斷cookie是否存在
- javascript js cookie的存儲,獲取和刪除
- javascript cookies 設(shè)置、讀取、刪除實例代碼
- js實現(xiàn)操作cookie的常見方法總結(jié)【創(chuàng)建、讀取、刪除】
相關(guān)文章
javascript Array.prototype.slice的使用示例
javascript Array.prototype.slice除了常見的從某個數(shù)組中抽取出新的數(shù)組外，它還有一些其他的用法,下面就為大家講這些妙用2013-11-11
JavaScript 早已不只是一門寫寫網(wǎng)頁特效的腳本語言了，如今廣泛用于網(wǎng)站的前端交互。2011-04-04
判斷語句這個我們不陌生,就是判斷是否滿足指定的條件,如果滿足則執(zhí)行一定的代碼,否則跳過,下面這篇文章主要給大家介紹了關(guān)于JavaScript中判斷的優(yōu)雅寫法,需要的朋友可以參考下2021-10-10
JavaScript面試之如何實現(xiàn)數(shù)組拍平（扁平化）方法
數(shù)組扁平化是指將一個多維數(shù)組變?yōu)橐痪S數(shù)組,下面這篇文章主要給大家介紹了關(guān)于JavaScript面試之如何實現(xiàn)數(shù)組拍平（扁平化）方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-11-11
本篇文章主要介紹了JS如何設(shè)置元素樣式的方法示例，主要介紹了三種方法，具有一定的參考價值，有興趣的可以了解一下2017-08-08
微信JS-SDK自定義分享功能實例詳解【分享給朋友/分享到朋友圈】
這篇文章主要介紹了微信JS-SDK自定義分享功能,結(jié)合實例形式分析了基于JS-SDK接口實現(xiàn)的分享給朋友及分享到朋友圈等功能的相關(guān)配置文件與數(shù)據(jù)操作技巧,需要的朋友可以參考下2016-11-11
本文將詳細介紹Canvas + JavaScript 制作圖片粒子效果的方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JavaScript執(zhí)行機制，想要搞懂JavaScript執(zhí)行機制，便與進程與線程的概念脫不了干系，下面我們就來看看這JavaScript執(zhí)行機制的具體介紹吧,需要的朋友可以參考一下2022-08-08
如果說讓JavaScript讀取站點上一文本文件,那不過是個再簡單不了的事了；但若說要換成一個二進制的文件，并且是完全靜態(tài)的讀取,那似乎有點天方夜譚了。2009-04-04
js分解url參數(shù)（面向?qū)ο?極簡主義法應用）
剛看到笑看風云寫的JavaScript面向?qū)ο?極簡主義法)和一個分解url參數(shù)面試題，我作了一下修改，記錄下來2012-08-08