什么是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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
基于jquery编写分页插件
Mar 07 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
基于jPlayer三分屏的制作方法
2016/12/21 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
Vue的路由及路由钩子函数的实现
2019/07/02 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
python 为什么说eval要慎用
2019/03/26 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
python实现接口并发测试脚本
2019/06/25 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
趣味运动会策划方案
2014/06/02 职场文书
关于安全的标语
2014/06/10 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
投诉信回复范文
2015/07/03 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python