javascript學(xué)習(xí)筆記（七）利用javascript來(lái)創(chuàng)建和存儲(chǔ)cookie
更新時(shí)間：2011年04月08日 00:31:54 作者：
今天把javascript如何用來(lái)創(chuàng)建及存儲(chǔ)cookie復(fù)習(xí)了一下，其中的一點(diǎn)體會(huì)拿出來(lái)和大家討論，懇請(qǐng)高手指點(diǎn)一二。
首先看一下基礎(chǔ)知識(shí)：
1、什么是cookie
cookie 是存儲(chǔ)于訪(fǎng)問(wèn)者的計(jì)算機(jī)中的變量。每當(dāng)同一臺(tái)計(jì)算機(jī)通過(guò)瀏覽器請(qǐng)求某個(gè)頁(yè)面時(shí)，就會(huì)發(fā)送這個(gè) cookie。你可以使用 JavaScript 來(lái)創(chuàng)建和取回 cookie 的值
2、有關(guān)cookie的例子：
•名字 cookie 當(dāng)訪(fǎng)問(wèn)者首次訪(fǎng)問(wèn)頁(yè)面時(shí)，他或她也許會(huì)填寫(xiě)他/她們的名字。名字會(huì)存儲(chǔ)于 cookie 中。當(dāng)訪(fǎng)問(wèn)者再次訪(fǎng)問(wèn)網(wǎng)站時(shí)，他們會(huì)收到類(lèi)似 "Welcome John Doe!" 的歡迎詞。而名字則是從 cookie 中取回的。
•密碼 cookie 當(dāng)訪(fǎng)問(wèn)者首次訪(fǎng)問(wèn)頁(yè)面時(shí)，他或她也許會(huì)填寫(xiě)他/她們的密碼。密碼也可被存儲(chǔ)于 cookie 中。當(dāng)他們?cè)俅卧L(fǎng)問(wèn)網(wǎng)站時(shí)，密碼就會(huì)從 cookie 中取回。
•日期 cookie 當(dāng)訪(fǎng)問(wèn)者首次訪(fǎng)問(wèn)你的網(wǎng)站時(shí)，當(dāng)前的日期可存儲(chǔ)于 cookie 中。當(dāng)他們?cè)俅卧L(fǎng)問(wèn)網(wǎng)站時(shí)，他們會(huì)收到類(lèi)似這樣的一條消息："Your last visit was on Tuesday August 11, 2005!"。日期也是從 cookie 中取回的。
下面來(lái)創(chuàng)建一個(gè)cookie的實(shí)例，如何來(lái)創(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值
}
}
}
}
//測(cè)試cookie
function checkCookie() {
var cookieUser = document.getElementById("cookieUser");
var userName = getCookie("userName");
if(userName) {
cookieUser.innerHTML = "您好"+userName+"，歡迎再次回來(lái)！";
} else {
var value = prompt("請(qǐng)輸入用戶(hù)名", "");
if(value) {
setCookie('userName', value, 1);
} else {
alert("請(qǐng)輸入用戶(hù)名！");
}
}
}
主要在于如何提取我們需要的cookie信息，在本例的getCookie函數(shù)中主要是將cookie信息轉(zhuǎn)化成數(shù)組的方式來(lái)查找我們需要提取的cookie值。還可以通過(guò)正則表達(dá)式的方式來(lái)匹配，如下：
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]);
}
}
比如在這個(gè)例子中，如果打開(kāi)瀏覽器中沒(méi)有存儲(chǔ)名為userName的cookie，則會(huì)提示用戶(hù)輸入用戶(hù)名，再次刷新頁(yè)面時(shí)則會(huì)顯示輸入的cookie值。
最后我們可以測(cè)試一下代碼：
<body onload="checkCookie()">
<p id="cookieUser"></p>
</body>
1、什么是cookie
cookie 是存儲(chǔ)于訪(fǎng)問(wèn)者的計(jì)算機(jī)中的變量。每當(dāng)同一臺(tái)計(jì)算機(jī)通過(guò)瀏覽器請(qǐng)求某個(gè)頁(yè)面時(shí)，就會(huì)發(fā)送這個(gè) cookie。你可以使用 JavaScript 來(lái)創(chuàng)建和取回 cookie 的值
2、有關(guān)cookie的例子：
•名字 cookie 當(dāng)訪(fǎng)問(wèn)者首次訪(fǎng)問(wèn)頁(yè)面時(shí)，他或她也許會(huì)填寫(xiě)他/她們的名字。名字會(huì)存儲(chǔ)于 cookie 中。當(dāng)訪(fǎng)問(wèn)者再次訪(fǎng)問(wèn)網(wǎng)站時(shí)，他們會(huì)收到類(lèi)似 "Welcome John Doe!" 的歡迎詞。而名字則是從 cookie 中取回的。
•密碼 cookie 當(dāng)訪(fǎng)問(wèn)者首次訪(fǎng)問(wèn)頁(yè)面時(shí)，他或她也許會(huì)填寫(xiě)他/她們的密碼。密碼也可被存儲(chǔ)于 cookie 中。當(dāng)他們?cè)俅卧L(fǎng)問(wèn)網(wǎng)站時(shí)，密碼就會(huì)從 cookie 中取回。
•日期 cookie 當(dāng)訪(fǎng)問(wèn)者首次訪(fǎng)問(wèn)你的網(wǎng)站時(shí)，當(dāng)前的日期可存儲(chǔ)于 cookie 中。當(dāng)他們?cè)俅卧L(fǎng)問(wèn)網(wǎng)站時(shí)，他們會(huì)收到類(lèi)似這樣的一條消息："Your last visit was on Tuesday August 11, 2005!"。日期也是從 cookie 中取回的。
下面來(lái)創(chuàng)建一個(gè)cookie的實(shí)例，如何來(lái)創(chuàng)建cookie及取出cookie
javascript部分代碼：
復(fù)制代碼 代碼如下:
//創(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值
}
}
}
}
//測(cè)試cookie
function checkCookie() {
var cookieUser = document.getElementById("cookieUser");
var userName = getCookie("userName");
if(userName) {
cookieUser.innerHTML = "您好"+userName+"，歡迎再次回來(lái)！";
} else {
var value = prompt("請(qǐng)輸入用戶(hù)名", "");
if(value) {
setCookie('userName', value, 1);
} else {
alert("請(qǐng)輸入用戶(hù)名！");
}
}
}
主要在于如何提取我們需要的cookie信息，在本例的getCookie函數(shù)中主要是將cookie信息轉(zhuǎn)化成數(shù)組的方式來(lái)查找我們需要提取的cookie值。還可以通過(guò)正則表達(dá)式的方式來(lái)匹配，如下：
復(fù)制代碼 代碼如下:
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]);
}
}
比如在這個(gè)例子中，如果打開(kāi)瀏覽器中沒(méi)有存儲(chǔ)名為userName的cookie，則會(huì)提示用戶(hù)輸入用戶(hù)名，再次刷新頁(yè)面時(shí)則會(huì)顯示輸入的cookie值。
最后我們可以測(cè)試一下代碼：
復(fù)制代碼 代碼如下:
<body onload="checkCookie()">
<p id="cookieUser"></p>
</body>
您可能感興趣的文章:
- javascript創(chuàng)建cookie、讀取cookie
- asp.net通過(guò)js實(shí)現(xiàn)Cookie創(chuàng)建以及清除Cookie數(shù)組的代碼
- 什么是cookie?js手動(dòng)創(chuàng)建和存儲(chǔ)cookie
- javascript創(chuàng)建和存儲(chǔ)cookie示例
- JavaScript創(chuàng)建、讀取和刪除cookie
- JavaScript創(chuàng)建一個(gè)歡迎cookie彈出窗實(shí)現(xiàn)代碼
- JS設(shè)置cookie、讀取cookie、刪除cookie
- JS操作Cookies包括(讀取添加與刪除)
- JS保存和刪除cookie操作 判斷cookie是否存在
- javascript js cookie的存儲(chǔ),獲取和刪除
- javascript cookies 設(shè)置、讀取、刪除實(shí)例代碼
- js實(shí)現(xiàn)操作cookie的常見(jiàn)方法總結(jié)【創(chuàng)建、讀取、刪除】
相關(guān)文章
這篇文章主要介紹了JavaScript axios安裝與封裝案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
JavaScript手寫(xiě)九宮格抽獎(jiǎng)demo
這篇文章主要為大家介紹了JavaScript 手寫(xiě)九宮格抽獎(jiǎng)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
這篇文章主要介紹了小程序指紋驗(yàn)證的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
通過(guò)修改360搶票的刷新頻率和突破8車(chē)次限制實(shí)現(xiàn)方法
這篇文章主要介紹了通過(guò)修改360搶票的刷新頻率和突破8車(chē)次限制實(shí)現(xiàn)方法的相關(guān)資料,現(xiàn)在刷票工具很多，這里就舉一例修改，增加搶票頻率及突破8車(chē)次限制，需要的朋友可以參考下2017-01-01
微信小程序?qū)崿F(xiàn)簡(jiǎn)易的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)易的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
2020淘寶618理想生活列車(chē)自動(dòng)領(lǐng)喵幣js腳本的代碼
這篇文章主要介紹了2020淘寶618理想生活列車(chē)自動(dòng)領(lǐng)喵幣腳本,需要先安裝 auto.js腳本，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了JavaScript遞歸操作,由一個(gè)階乘問(wèn)題開(kāi)始分析了遞歸操作的原理、實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-10-10
JS實(shí)現(xiàn)點(diǎn)擊圖片放大縮小及拖拽功能
本文使用 vue創(chuàng)建一個(gè)可拖拽和縮放的圖片查看器組件,該組件不僅可以展示圖片,還支持用戶(hù)通過(guò)鼠標(biāo)拖動(dòng)和縮放來(lái)查看細(xì)節(jié),本文將介紹如何封裝一個(gè)簡(jiǎn)單的圖片拖拽與縮放組件,感興趣的小伙伴跟著小編一起來(lái)看看吧2025-02-02
JavaScript實(shí)現(xiàn)判斷圖片是否加載完成的3種方法整理
這篇文章主要介紹了JavaScript實(shí)現(xiàn)判斷圖片是否加載完成的3種方法整理,本文講解了onload方法、javascipt原生方法、jquery方法三種方法,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了js獲取圖片的base64編碼并壓縮，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-12-12