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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
vue中render函数的使用详解
Oct 12 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 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的简易冒泡法代码分享
2012/08/28 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
JavaScript 面向对象之命名空间
2010/05/04 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python如何调用外部系统命令
2019/08/07 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
大二法学专业职业生涯规划范文
2014/02/12 职场文书
终止劳动合同协议书
2014/04/14 职场文书
2014和解协议书范文
2014/09/15 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
Java 数组的使用
2022/05/11 Java/Android