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 相关文章推荐
jquery入门—访问DOM对象方法
Jan 07 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
vue中英文切换实例代码
Jan 21 Javascript
AJAX检测用户名是否存在的方法
Mar 24 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
长波知识介绍
2021/03/01 无线电
ThinkPHP控制器详解
2015/07/27 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
phpStorm2020 注册码
2020/09/17 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
前端性能优化及技巧
2016/05/06 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python自动发邮件脚本
2017/03/31 Python
python多进程实现文件下载传输功能
2018/07/28 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
活动总结怎么写啊
2014/05/07 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
2014年服务员工作总结
2014/11/18 职场文书
2015年护士节慰问信
2015/03/23 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
中学教代会开幕词
2016/03/04 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏