什么是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 相关文章推荐
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
javascript中 try catch用法
Aug 16 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
微信小程序block的使用教程
Apr 01 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
javascript基本语法
2016/05/31 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
python 写的一个爬虫程序源码
2016/02/28 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
2014升学宴答谢词
2014/01/26 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
银行求职信范文
2014/05/26 职场文书
求职意向书
2014/07/29 职场文书
五好家庭事迹材料
2014/12/20 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
Python基础之函数嵌套知识总结
2021/05/23 Python
如何正确理解python装饰器
2021/06/15 Python
mysql查看表结构的三种方法总结
2022/07/07 MySQL
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技