今天把javascript如何用来创建及存储cookie复习了一下，其中的一点体会拿出来和大家讨论，首先看一下基础知识：

什么是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。

javascript部分代码：

01 //创建cookie
02 function setCookie(name, value, expireday) {
03     var exp = new Date();
04     exp.setTime(exp.getTime() + expireday*24*60*60*1000); //设置cookie的期限
05     document.cookie = name+"="+escape(value)+"; expires"+"="+exp.toGMTString();//创建cookie
06 }
07 //提取cookie中的值
08 function getCookie(name) {
09     var cookieStr = document.cookie;
10     if(cookieStr.length > 0) {
11         var cookieArr = cookieStr.split(";"); //将cookie信息转换成数组
12         for (var i=0; i<cookieArr.length; i++) {
13             var cookieVal = cookieArr[i].split("="); //将每一组cookie(cookie名和值)也转换成数组
14             if(cookieVal[0] == name) {
15                 return unescape(cookieVal[1]); //返回需要提取的cookie值
16             }
17         }
18     }
19 }
20 //测试cookie
21 function checkCookie() {
22     var cookieUser = document.getElementById("cookieUser");
23     var userName = getCookie("userName");
24     if(userName) {
25         cookieUser.innerHTML = "您好"+userName+"，欢迎再次回来！";
26     } else {
27         var value = prompt("请输入用户名", "");
28         if(value) {
29             setCookie('userName', value, 1);
30         } else {
31             alert("请输入用户名！");
32         }
33     }
34 }

主要在于如何提取我们需要的cookie信息，在本例的getCookie函数中主要是将cookie信息转化成数组的方式来查找我们需要提取的cookie值。还可以通过正则表达式的方式来匹配，如下：

1 function getCookie(name) {
2     var cookieStr = document.cookie;
3     var cookieArr = cookieStr.match(new RegExp(name+"=[a-zA-Z0-9]*;$"));
4     var cookieVal = cookieArr.split("=");
5     if(cookieVal[0] == name) {
6         return unescape(cookieVal[1]);
7     }
8 }

比如在这个例子中，如果打开浏览器中没有存储名为userName的cookie，则会提示用户输入用户名，再次刷新页面时则会显示输入的cookie值。 最后我们可以测试一下代码：

1 <body onload="checkCookie()">
2 <p id="cookieUser"></p>
3 </body>

JavaScript如何读写cookie的更多相关文章

  1. JS读写Cookie（设置、读取、删除）

    JS读写Cookie(设置.读取.删除) Cookie是客户端存放数据的一种方式,可用来做状态保持. 1.设置Cookie: a.无过期时间:(若不设置过期时间,默认为会话级Cookie,浏览器关闭就 ...

  2. 两种方法使用js读写cookie实现一个底部广告浮层效果

    下面一个案例实现了js实现一个页面浮层并且使用两种方法使用js读写cookie:来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方 ...

  3. Javascript中关于cookie的那些事儿

    Javascript-cookie 什么是cookie? 指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).简单点来说就是:浏览器缓存. cookie由什 ...

  4. JavaScript学习08 Cookie对象

    JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...

  5. JS读写cookie以及中文乱码解决

    本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092489.html 转载请注明. Js获取所有的cookie信息: var cookiename = d ...

  6. JavaScript创建读取cookie代码示例【附：跨域cookie解决办法】

    使用JavaScript 原生存取cookie代码示例: var cookie = { set : function(name, value, expires, path, domain, secur ...

  7. 学习笔记： JavaScript/JQuery 的cookie操作

    转自:http://blog.csdn.net/barryhappy/archive/2011/04/27/6367994.aspx cookie是网页存储到用户硬盘上的一小段信息.最常见的作用是判断 ...

  8. PHP与JavaScript下的Cookie操作

    下面的例子列出几种情形交互场景,列出JS和php交互的方法.总结下,以免日后再为cookie问题困扰. setcookie.php getcookie.php 总结: php用自身函数读取php 的c ...

  9. wcf读写cookie

    一般来说,web应用的服务端(aspx或mvc的action)调用wcf时,是一个服务与服务的通讯,而不是客户端(浏览器)与服务器的通讯. 这种情况下,如果要在wcf端处理客户端的cookie,就需要 ...

随机推荐

  1. linux环境下nginx配置

    1.反向代理配置 #  nginx/conf/nginx.conf

  2. python中正则表达式在中文字符串匹配时的坑

    之前一直有使用python 正则表达式来做中文字符串或者中英文数字混合的字符串的匹配,发现有不少情况下会匹配失灵或者结果混乱,并且在不同操作系统上匹配结果也不一致,查了很久都不知道是什么原因.今天终于 ...

  3. webpack最小化lodash

    lodash作为一个比较常用的前端开发工具集,在使用webpack进行vendor分离的实践中,会遇到将整个lodash文件分离到vendor.js的问题.这样会使vendor.js文件变得特别大. ...

  4. request中的那些方法到底是干什么的？

    最近做Java Web项目,在.jsp页面和servlet之间request和response还是有些混淆,查阅了一些资料,总结如下,方便以后使用: 首先,servlet接口是最基本的,提供的五个方法 ...

  5. 学习python第十五天，面向对象

    Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的. 面向对象技术简介 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集 ...

  6. 数据结构学习-BST二叉查找树 ： 插入、删除、中序遍历、前序遍历、后序遍历、广度遍历、绘图

    二叉查找树(Binary Search Tree) 是一种树形的存储数据的结构 如图所示,它具有的特点是: 1.具有一个根节点 2.每个节点可能有0.1.2个分支 3.对于某个节点,他的左分支小于自身 ...

  7. 30-RoutingMiddleware介绍以及MVC引入

    1-构建路由 public class Startup { // This method gets called by the runtime. Use this method to add serv ...

  8. 站在C#和JS的角度细谈函数式编程与闭包

    1.函数式编程是什么? 摘自百度的说法是.函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus).而且λ演算的函数可以接受函数当作输 ...

  9. 程序员最值得听的歌曲TOP10

      No.10 一剪梅 费玉清 - 玉笛公子 <一剪梅>是1984年台湾同名电视剧的片头曲,原唱为林禹胜,经典版本由费玉清演唱,后又成为2009年霍建华.吕一主演电视剧<新一剪梅&g ...

  10. python学习笔记十：异常

    一.语法 #!/usr/bin/python filename='hello' #try except finally demo try: open('abc.txt') print hello ex ...