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 相关文章推荐
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
解决vue 退出动画无效的问题
Aug 09 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中处理模拟rewrite 效果
2006/12/09 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
传智播客学习之java 反射
2009/11/22 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
Python调用C语言开发的共享库方法实例
2015/03/18 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
董事长职责范文
2013/11/08 职场文书
个人求职信范文分享
2014/01/31 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
小学生读书活动总结
2014/06/30 职场文书
通知范文怎么写
2015/04/16 职场文书
导游词之镇江焦山
2019/11/21 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS