什么是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 相关文章推荐
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
JavaScript QueryString解析类代码
Jan 17 Javascript
js 省地市级联选择
Feb 07 Javascript
js function使用心得
May 10 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 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
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python对文件操作知识汇总
2016/05/15 Python
python正则分析nginx的访问日志
2017/01/17 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
python3判断IP地址的方法
2021/03/04 Python
XML文档面试题
2015/08/05 面试题
科室工作个人总结的自我评价
2013/10/29 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
小学家长通知书评语
2014/12/31 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python