今天把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. MappingException:class com.zsn.crm.Model.user not found whie looking for property user id

    之前好好地运行 什么东西都没动过 再次运行突然报异常*****MappingException:class com.zsn.crm.Model.user not found whie looking ...

  2. 返回固定数据的web服务器

    import socket def handle_client(socket_con): """ 接收来自客户端的请求,并接收请求报文,解析,返回 "" ...

  3. datatable常用设置

    bSort: false, // 是否排序功能 bFilter: false, // 过滤功能 bPaginate: true, // 翻页功能 bInfo: true, // 页脚信息 bProce ...

  4. C# Newtonsoft.Json 解析多嵌套json 进行反序列化

    [ { ", "time": "2016-09-09 12:23:33", ", "freeShipping": tru ...

  5. C# WPF使一个窗口挡在最前面，且不处理此窗口就不能点击其他窗口

    模态框弹出就可以了.窗口用ShowDialog调用. 可以在子窗体里把WindowStartupLocation设置为CenterOwner, 让子窗体在MainWindow的中心位置显示

  6. YCM的使用

    YCM大概用来做3件事: (1)自动补全 (2)检查语法 (3)跳转到函数定义 然后涉及到两个关键的文件.vimrc 和 .ycm_extra_conf.py 首先需要正确的配置,在.vimrc中写入 ...

  7. 被relativeLayout的grivate center 折腾死了

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  8. Quartus 11进行编译Compile Design的时候出现错误near text ã

    1. 设计的工程在Compile Design的时候出现以下的错误,百思不得姐 Error (): Verilog HDL syntax error at div_5.v() near text ã ...

  9. laravel5.5事件广播系统实例laravel-echo + redis + socket.io

    目录 1. 广播配置说明 1.1 广播驱动配置 1.2 注册服务提供器 2. 驱动器配置 2.1 安装predis 2.2. 配置服务端 2.2.1 安装方法 2.2.2 初始化服务端 2.2.3 运 ...

  10. USACO Section1.3 Prime Cryptarithm 解题报告

    crypt1解题报告 —— icedream61 博客园(转载请注明出处)--------------------------------------------------------------- ...