什么是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 相关文章推荐
javascript 强制刷新页面的实现代码
Dec 13 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
详解Layer弹出层样式
Aug 21 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 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
smarty的保留变量问题
2008/10/23 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
python使用心得之获得github代码库列表
2014/06/25 Python
简单的Python抓taobao图片爬虫
2014/10/26 Python
Python标准库之sqlite3使用实例
2014/11/25 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
python处理大日志文件
2019/07/23 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
如何使用repr调试python程序
2020/02/28 Python
django项目中新增app的2种实现方法
2020/04/01 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
医药代表个人求职信范本
2013/12/19 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
大学军训感言400字
2014/03/11 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
保护野生动物倡议书
2014/05/16 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
机关作风建设整改方案
2014/10/27 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python