什么是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 live()调用不存在的解决方法
Feb 26 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
利用javaScript处理常用事件详解
Apr 14 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
日期 时间js控件
2009/05/07 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
pandas重新生成索引的方法
2018/11/06 Python
Python中collections模块的基本使用教程
2018/12/07 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
如何通过python计算圆周率PI
2020/11/11 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
营销总经理的岗位职责
2013/12/15 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
温馨提示标语
2014/06/26 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
骨干教师事迹材料
2014/12/17 职场文书
鸟的天堂导游词
2015/01/31 职场文书
师德承诺书2015
2015/04/28 职场文书
开学典礼观后感
2015/06/15 职场文书
python使用glob检索文件的操作
2021/05/20 Python