什么是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操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
js同源策略详解
May 21 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 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动态生成虚拟现实VRML网页
2006/10/09 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
各种快递查询--Api接口
2016/04/26 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
node网页分段渲染详解
2016/09/05 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
python实现淘宝秒杀脚本
2020/06/23 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python实现文字版扫雷
2020/04/24 Python
django 外键创建注意事项说明
2020/05/20 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
微电影大赛策划方案
2014/06/05 职场文书
逃课检讨书
2015/01/26 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
nginx搭建NFS网络文件系统
2022/04/14 Servers