什么是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验证(图片/文件的扩展名)
Apr 25 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
vue实现循环切换动画
Oct 17 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 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
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
JS实现div居中示例
2014/04/17 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
js获取form的方法
2015/05/06 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Python 异常处理实例详解
2014/03/12 Python
python文件操作整理汇总
2014/10/21 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python提取log文件内容并画出图表
2019/07/08 Python
对python中的装包与解包实例详解
2019/08/24 Python
python查看数据类型的方法
2019/10/12 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
后备干部考察材料
2014/02/12 职场文书
夜不归宿检讨书
2014/02/25 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
小学运动会班级口号
2014/06/09 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
物业接待员岗位职责
2015/04/15 职场文书
三好学生主要事迹材料
2015/11/03 职场文书