什么是cookie?js手动创建和存储cookie


Posted in Javascript onMay 27, 2014

什么是cookie?

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。
有关cookie的例子:

名字 cookie
当访问者首次访问页面时,他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时,他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。
密码 cookie
当访问者首次访问页面时,他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时,密码就会从 cookie 中取回。
日期 cookie
当访问者首次访问你的网站时,当前的日期可存储于 cookie 中。当他们再次访问网站时,他们会收到类似这样的一条消息:"Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。

创建和存储 cookie

在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时,他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时,他们就会收到欢迎词。

首先,我们会创建一个可在 cookie 变量中存储访问者姓名的函数:

<span style="font-size:14px;">function setCookie(c_name,value,expiredays) 
{ 
var exdate=new Date() 
exdate.setDate(exdate.getDate()+expiredays) 
document.cookie=c_name+ "=" +escape(value)+ 
((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) 
}</span>

上面这个函数中的参数存有 cookie 的名称、值以及过期天数。

在上面的函数中,我们首先将天数转换为有效的日期,然后,我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。

之后,我们要创建另一个函数来检查是否已设置 cookie:

<span style="font-size:14px;">function getCookie(c_name) 
{ 
if (document.cookie.length>0) 
{ 
c_start=document.cookie.indexOf(c_name + "=") 
if (c_start!=-1) 
{ 
c_start=c_start + c_name.length+1 
c_end=document.cookie.indexOf(";",c_start) 
if (c_end==-1) c_end=document.cookie.length 
return unescape(document.cookie.substring(c_start,c_end)) 
} 
} 
return "" 
}</span>

上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie,那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie,就返回值,否则返回空字符串。

最后,我们要创建一个函数,这个函数的作用是:如果 cookie 已设置,则显示欢迎词,否则显示提示框来要求用户输入名字。

<span style="font-size:14px;">function checkCookie() 
{ 
username=getCookie('username') 
if (username!=null && username!="") 
{alert('Welcome again '+username+'!')} 
else 
{ 
username=prompt('Please enter your name:',"") 
if (username!=null && username!="") 
{ 
setCookie('username',username,365) 
} 
} 
}</span>

这是所有的代码:
<span style="font-size:14px;"><html> 
<head> 
<script type="text/javascript"> 
function getCookie(c_name) 
{ 
if (document.cookie.length>0) 
{ 
c_start=document.cookie.indexOf(c_name + "=") 
if (c_start!=-1) 
{ 
c_start=c_start + c_name.length+1 
c_end=document.cookie.indexOf(";",c_start) 
if (c_end==-1) c_end=document.cookie.length 
return unescape(document.cookie.substring(c_start,c_end)) 
} 
} 
return "" 
} function setCookie(c_name,value,expiredays) 
{ 
var exdate=new Date() 
exdate.setDate(exdate.getDate()+expiredays) 
document.cookie=c_name+ "=" +escape(value)+ 
((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) 
} 
function checkCookie() 
{ 
username=getCookie('username') 
if (username!=null && username!="") 
{alert('Welcome again '+username+'!')} 
else 
{ 
username=prompt('Please enter your name:',"") 
if (username!=null && username!="") 
{ 
setCookie('username',username,365) 
} 
} 
} 
</script> 
</head> 
<body onLoad="checkCookie()"> 
</body> 
</html></span>
Javascript 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
关于vue面试题汇总
Mar 20 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
javascript中的数据类型检测方法详解
Aug 07 Javascript
详解JS数组方法
Nov 20 Javascript
js打开windows上的可执行文件示例
May 27 #Javascript
JavaScript数值数组排序示例分享
May 27 #Javascript
JavaScript作用域链示例分享
May 27 #Javascript
Node调试工具JSHint的安装及配置教程
May 27 #Javascript
javaScript使用EL表达式的几种方式
May 27 #Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 #Javascript
利用javascript实现全部删或清空所选的操作
May 27 #Javascript
You might like
Php图像处理类代码分享
2012/01/19 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
Python字符串切片操作知识详解
2016/03/28 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Python datetime 如何处理时区信息
2020/09/02 Python
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
《太阳》教学反思
2014/02/21 职场文书
生态养殖创业计划书
2014/05/06 职场文书
建设工地安全标语
2014/06/07 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers