javascript创建和存储cookie示例


Posted in Javascript onJanuary 07, 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 变量中存储访问者姓名的函数:

创建cookie其实也就是在拼一句String :

"username=amosli;expires=Mon, 16 Dec 2013 16:20:04 GMT"
然后document.cookie=上面的String即可.

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())
}

上面这个函数中的参数存有 cookie 的名称、值以及过期天数。

在上面的函数中,我们首先将天数转换为有效的日期,然后,我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。

之后,我们要创建另一个函数来检查是否已设置 cookie:

getCookie()的核心就一句话document.cookie,剩余部分就是对字符串的处理上了.

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
/* 
cookie是一组字符串:"username=amosli; ASPSESSIONIDQAAADBDD=GGIJNHCDKGNFEGJIIFDNNION; __utma=119627022.986713705.1387205055.1387205055.1387208465.2; __utmb=119627022.3.10.1387208465; __utmc=119627022; __utmz=119627022.1387208465.2.2.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=(not%20provided)"
*/
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 ""
}
 

上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie,那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie,就返回值,否则返回空字符串。

最后,我们要创建一个函数,这个函数的作用是:如果 cookie 已设置,则显示欢迎词,否则显示提示框来要求用户输入名字。

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)
    }
  }
}

这是所有的代码:

<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>
Javascript 相关文章推荐
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 #Javascript
window.showModalDialog()返回值的学习心得总结
Jan 07 #Javascript
js showModalDialog参数的使用详解
Jan 07 #Javascript
js showModalDialog弹出窗口实例详解
Jan 07 #Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 #Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 #Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 #Javascript
You might like
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
javascript call方法使用说明
2010/01/11 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
js实现左右轮播图
2020/01/09 Javascript
极简的Python入门指引
2015/04/01 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
python求质数的3种方法
2018/09/28 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
python中pyplot基础图标函数整理
2020/11/10 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
《维生素c的故事》教学反思
2014/02/18 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
合伙购房协议样本
2014/10/06 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
同学聚会邀请函
2015/01/30 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
施工安全协议书
2016/03/22 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
bose降噪耳机音能消除人声吗
2022/04/19 数码科技