今天把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. springmvc 前端表单提交给后端出现乱码

    在springmvc框架练习中遇到了乱码问题,经过一番网上查找解决方法之后,最后发现是需要在tomcat中的server.xml中添加编码设置 URIEncoding="UTF-8" ...

  2. 还在使用pdf、word简历？简单五步实现github托管个人逼格简历

    写在前面: 什么是git.github? git 版本控制工具 github 通过git工具做的版本控制的项目托管平台 项目开发肯定不止一个程序猿,多个程序猿针对同一个文件进行代码读写操作时,是先保存 ...

  3. ethereum(以太坊)(十二)--应用(一)__集资(构造函数/映射)

    pragma solidity ^0.4.4; contract funder{ //0xca35b7d915458ef540ade6068dfe2f44e8fa733c //0x14723a09ac ...

  4. php扩展开发-INI配置

    php.ini文件是用来保存各项扩展配置的文件,每个扩展都或多或少需要有一个定制化的配置,ini文件是一个很好的保存配置的方式,我们来看下怎么在自己的扩展里,使用到ini的配置功能 //创建ini的配 ...

  5. 千锋教育Vue组件--vue基础的方法

    课程地址: https://ke.qq.com/course/251029#term_id=100295989 <!DOCTYPE html> <html> <head& ...

  6. 1014-34-首页15-计算原创微博的frame------计算cell的高度---计算 UILabel 的 CGSize 的方法

    一.总体思路: 在控制器中,每次拿到数据模型(请求了数据.加载新微博)的时候,就调用 - (NSArray *)stausFramesWithStatuses:(NSArray *)statuses, ...

  7. C语言进阶——循环语句07

    循环语句的基本工作方式: 通过条件表达式判定是否执行循环体 条件表达式遵循if语句表达式的原则 do,while,for的区别: do语句先执行后判断,循环体至少执行一次 while语句先判断后执行, ...

  8. [Bzoj3894]文理分科（最小割）

    Description  文理分科是一件很纠结的事情!(虽然看到这个题目的人肯定都没有纠结过)  小P所在的班级要进行文理分科.他的班级可以用一个n*m的矩阵进行描述,每个格子代表一个同学的座位.每位 ...

  9. bitset学习

    bitset是个好东西.嗯.贼sao~ 很早就讲过但是我并没有弄懂.(现在也不敢说明白) 首先bitset是有常数的,而且常数并不能忽略不计——$(\frac{1}{32})$ 目前我也只是会bits ...

  10. 「微信小程序免费辅导教程」26，基础内容组件rich-text体验