javascript學(xué)習(xí)筆記（七）利用javascript來創(chuàng)建和存儲cookie
更新時間：2011年04月08日 00:31:54 作者：
今天把javascript如何用來創(chuàng)建及存儲cookie復(fù)習(xí)了一下，其中的一點體會拿出來和大家討論，懇請高手指點一二。
首先看一下基礎(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部分代碼：
復(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值
}
}
}
}
//測試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值。還可以通過正則表達式的方式來匹配，如下：
復(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]);
}
}
比如在這個例子中，如果打開瀏覽器中沒有存儲名為userName的cookie，則會提示用戶輸入用戶名，再次刷新頁面時則會顯示輸入的cookie值。
最后我們可以測試一下代碼：
復(fù)制代碼 代碼如下:
<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 axios安裝與封裝案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08
這篇文章主要為大家介紹了JavaScript 手寫九宮格抽獎demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要介紹了小程序指紋驗證的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
通過修改360搶票的刷新頻率和突破8車次限制實現(xiàn)方法
這篇文章主要介紹了通過修改360搶票的刷新頻率和突破8車次限制實現(xiàn)方法的相關(guān)資料,現(xiàn)在刷票工具很多，這里就舉一例修改，增加搶票頻率及突破8車次限制，需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡易的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
2020淘寶618理想生活列車自動領(lǐng)喵幣js腳本的代碼
這篇文章主要介紹了2020淘寶618理想生活列車自動領(lǐng)喵幣腳本,需要先安裝 auto.js腳本，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了JavaScript遞歸操作,由一個階乘問題開始分析了遞歸操作的原理、實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下2016-10-10
本文使用 vue創(chuàng)建一個可拖拽和縮放的圖片查看器組件,該組件不僅可以展示圖片,還支持用戶通過鼠標拖動和縮放來查看細節(jié),本文將介紹如何封裝一個簡單的圖片拖拽與縮放組件,感興趣的小伙伴跟著小編一起來看看吧2025-02-02
JavaScript實現(xiàn)判斷圖片是否加載完成的3種方法整理
這篇文章主要介紹了JavaScript實現(xiàn)判斷圖片是否加載完成的3種方法整理,本文講解了onload方法、javascipt原生方法、jquery方法三種方法,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了js獲取圖片的base64編碼并壓縮，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2020-12-12