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 实现上下滚动效果示例代码
Aug 09 Javascript
jquery实现div阴影效果示例代码
Sep 16 Javascript
javascript不可用的问题探究
Oct 01 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
vue中的数据绑定原理的实现
Jul 02 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
用PHP制作静态网站的模板框架(一)
2006/10/09 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php计算整个目录大小的方法
2015/06/01 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
react 创建单例组件的方法
2018/04/26 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
跟老齐学Python之用while来循环
2014/10/02 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
python excel多行合并的方法
2020/12/09 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
国际贸易专业个人求职信格式
2014/02/02 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
解除处分决定书
2015/06/25 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers