javascript学习笔记（七）利用javascript来创建和存储cookie

首先看一下基础知识：
1、什么是cookie
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值
2、有关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部分代码：


代码如下:

//创建cookie
function setCookie(name, value, expireday) {
var exp = new Date();
exp.setTime(exp.getTime() + expireday*24*60*60*1000); //设置cookie的期限
document.cookie = name+"="+escape(value)+"; expires"+"="+exp.toGMTString();//创建cookie
}
//提取cookie中的值
function getCookie(name) {
var cookieStr = document.cookie;
if(cookieStr.length > 0) {
var cookieArr = cookieStr.split(";"); //将cookie信息转换成数组
for (var i=0; i<cookieArr.length; i++) {
var cookieVal = cookieArr[i].split("="); //将每一组cookie(cookie名和值)也转换成数组
if(cookieVal[0] == name) {
return unescape(cookieVal[1]); //返回需要提取的cookie值
}
}
}
}
//测试cookie
function checkCookie() {
var cookieUser = document.getElementById("cookieUser");
var userName = getCookie("userName");
if(userName) {
cookieUser.innerHTML = "您好"+userName+"，欢迎再次回来！";
} else {
var value = prompt("请输入用户名", "");
if(value) {
setCookie('userName', value, 1);
} else {
alert("请输入用户名！");
}
}
}

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


代码如下:

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

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


代码如下:

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

赞 (0)

相关推荐

  • javascript 模式设计之工厂模式学习心得

    模式类型:工厂模式 模式说明:常用模式之一,用来动态创建对象 适用范围:在运行期间需要在一系列可互换的子类中进行选择的类 注意事项:接口的实现,从而使不同子类可以被同等的对待,恰当的使用工厂模式,但不要拘泥与形式,理解本质. 关键点:以 函数/类/子类 构建的选择器 本质:函数作为选择器的使用 一般使用形式: 作为独立的选择器存在: 复制代码 代码如下: function FactoryMode(index){ switch(index){ case "index1" : return

  • javascript的正则表达式学习资料复习

    关于反向引用 复制代码 代码如下: // 测试函数 function matchReg(reg, str) { var result = str.match(reg); if(result) { console.dir(result); } else { console.log('match failed'); } } var reg = /([A-Za-z]{0,6})\1/; var str = 'AndrewAndrew'; // 测试通过 matchReg(reg, str); //通过

  • Javascript 入门基础学习

    一.JavaScript简介: 学习JavaScript之前,有些东西你需要先了解: HTML XHTML 我觉得这些不需要太深入,懂个大概就行. JavaScript是: JavaScript 被设计用来向 HTML 页面添加交互行为. JavaScript 是一种脚本语言. JavaScript 由数行可执行计算机代码组成. JavaScript 通常被直接嵌入 HTML 页面. JavaScript 是一种解释性语言. 所有的人无需购买许可证均可使用 JavaScript. 这些都是一些书

  • 每天一篇javascript学习小结（Array数组）

    1.数组常用方法 var colors = ["red", "blue", "green"]; //creates an array with three strings alert(colors.toString()); //red,blue,green alert(colors.valueOf()); //red,blue,green alert(colors); //red,blue,green 2.数组map()方法 var number

  • JavaScript高级程序设计 学习笔记 js高级技巧

    第十八章 高级技巧 1.高级函数 1.1 作用域安全的构造函数 ①直接调用构造函数而不适用new操作符时,由于this对象的晚绑定,它将映射在全局对象window上,导致对象属性错误增加到window. 复制代码 代码如下: function Person(name,age,job){ this.name = name; this.age = age; this.job = job; } Var person = Person("Jay",29,"singer");

  • javascript 学习笔记（六）浏览器类型及版本信息检测代码

    下面的checkBrowser()函数主要检测了三种浏览器(IE, firefox, chrome),其它的浏览器的检测有兴趣的朋友可以自行添加检测代码! HTML部分代码: (页面加载时执行检测函数) 复制代码 代码如下: <body onload="checkBrowser()"> <p id="userAgent"></p> <p id="browser"></p> </bo

  • JavaScript学习小结(一)——JavaScript入门基础

    JavaScript学习小结(一)——JavaScript入门基础

    一.JavaScript语言特点 1.1.JavaScript是基于对象和事件驱动的(动态的) 它可以直接对用户或客户输入做出响应,无须经过Web服务程序.它对用户的响应,是采用以事件驱动的方式进行的.所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,就称为"事件".比如按下鼠标,移动窗口,选择菜单等都可以视为事件.当事件发生后,可能会引起相应的事件响应. 1.2.JavaScript是跨平台的 JavaScript是依赖于浏览器本身的,与操作系统无关. 二.JavaScript

  • 写给想学习Javascript的朋友一点学习经验小结

    当然只是个人的经验,有什么不对的也请高手见谅和指正. 关于到培训学校学习的忠告:别说现在没有这样的学校,就是有专门的学校也不要去,因为不会有好的老师的.不要浪费你自己(很可能是你父母)的钱和时间.趁早死了这个念头. 关于培训学校的这个我想我要比一般的朋友更有发言权,因为我本人干英语培训将近2年,我很清楚培训市场的情况,你很难碰到一个好的老师.英语可能还好些,毕竟英语说得好的老师还比较多,长期跟老外泡在一起,确实对口语能力的提高很显著,但是代价是很昂贵的.而你现在要学的是Javascript,呵呵

  • JavaScript 学习笔记二 字符串拼接

    var str="hello"; str+="world"; 实际上,这段代码在幕后执行的步骤如下: (1) 创建存储"hello"的字符串. (2) 创建存储"world"的字符串. (3) 创建存储连接结果的字符串. (4) 把str的当前内容复制到结果中. (5) 把"world"复制到结果中. (6) 更新str,使它指向结果. 每次完成字符串连接都会执行步骤2到6,使得这种操作非常消耗资源.如果重

  • 每天一篇javascript学习小结（Boolean对象）

    创建 Boolean 对象的语法:     new Boolean(value);    //构造函数     Boolean(value);        //转换函数     参数 value 由布尔对象存放的值或者要转换成布尔值的值. 返回值     当作为一个构造函数(带有运算符 new)调用时,Boolean() 将把它的参数转换成一个布尔值,并且返回一个包含该值的 Boolean 对象.     如果作为一个函数(不带有运算符 new)调用时,Boolean() 只将把它的参数转换成

  • JavaScript 构造函数 面相对象学习必备知识

    复制代码 代码如下: function A(x) { this.x = x; } var obj = new A(5); alert(obj.x); 这段代码十分简单,但是我们重要的是看到了一个十分惊讶的结果,obj被我们赋予了一个属性x,就如同我们在C#中使用某个类的实例的时候一样.那么这个属性是怎么样产生的呢? 关键语句:this.x=x.这句话就是进行一个属性的申明与赋值,这里,我们肯定会问到,this是什么?为什么可以使用this.x来进行申明与赋值属性呢? 其实this代表的就是我们刚

  • javascript学习笔记（二） 鼠标经过时，改变div块的背景色的代码

    HTML部分代码: 复制代码 代码如下: <ul> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> <li>鼠标经过时改变背景色</li> </ul> javascript部分代码: 当鼠标经过时,给li添加class="current"类,鼠标离开时,去除该类,达到改变背景色的目的 复制代码 代

  • javascript学习笔记（九）javascript中的原型(prototype)及原型链的继承方式

    javascript学习笔记（九）javascript中的原型(prototype)及原型链的继承方式

    在使用面向对象编程时,对象间的继承关系自然少不了!而原型正是实现javascript继承的很重要的一种方法! 我们首先来看以下代码: 复制代码 代码如下: function person(name, age) { this.name = name; this.age = age; } person.prototype.getInfo = function() { alert("My name is "+this.name+", and I have "+this.a

  • javascript 学习笔记（八）javascript对象

    1.javascript中的内置对象 javascript中除了本身的内置对象,如以下我们所熟悉的对象: •Array •Date •Math •String •RegExp •-- 各个对象都有自己的属性及方法,比如我们经常使用属性及方法 属性:stringObject.length; arrayObject.length;-- 方法:stringObject.indexOf(); stringObject.splite(); stringObject.substr(); arrayObjec

随机推荐