什么是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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
JQuery 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
可以浮动某个物体的jquery控件用法实例
Jul 24 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 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
2006/10/09 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
Yii2使用dropdownlist实现地区三级联动功能的方法
2016/07/18 PHP
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
微信小程序 页面传参实例详解
2016/11/16 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
高效使用Python字典的清单
2018/04/04 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
Python with语句和过程抽取思想
2019/12/23 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
校园门卫岗位职责
2013/12/09 职场文书
老师对学生的评语
2014/04/18 职场文书
2016春节放假通知范文
2015/08/18 职场文书
Python图片检索之以图搜图
2021/05/31 Python
Python实现科学占卜 让视频自动打码
2022/04/09 Python