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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
详解React路由传参方法汇总记录
Nov 29 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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 中执行排序与 MySQL 中排序
2009/04/21 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
挂牌仪式主持词
2014/03/20 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
人代会标语
2014/06/30 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
初中物理教学反思
2016/02/19 职场文书
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技