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弹出层插件简化版代码下载
Oct 16 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 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 HtmlReplace输入过滤安全函数
2010/07/03 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
Javascript的闭包
2009/12/31 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python 数据结构之堆栈实例代码
2017/01/22 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
python取余运算符知识点详解
2019/06/27 Python
Python 获取项目根路径的代码
2019/09/27 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
python输出数学符号实例
2020/05/11 Python
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
营销计划书范文
2015/01/17 职场文书
九华山导游词
2015/02/03 职场文书
工作态度怎么写
2015/06/25 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python