什么是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 相关文章推荐
取得父标签
Nov 14 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
May 08 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
javascript中数组的常用算法深入分析
Mar 12 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技术开发技巧分享
2010/03/23 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
php中static和const关键字用法分析
2016/12/07 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python深入学习之内存管理
2014/08/31 Python
python3处理含有中文的url方法
2018/05/10 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
个人优缺点自我评价
2014/01/27 职场文书
个人务虚会发言材料
2014/10/20 职场文书
入伍通知书
2015/04/23 职场文书
繁星春水读书笔记
2015/06/30 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
vue+springboot实现登录验证码
2021/05/27 Vue.js