JavaScript学习之cookies
使用JavaScript操作cookies
一、什么是cookies？
cookies是一种对客户端硬盘的数据进行存取的技术，这种技术能够让网站把少量的数据存储到客户端的硬盘，同时也能够从客户端的硬盘读取存储的数据。存储的方式表现为一个很小的文本文件，这个文件可以存储的东西很多，比如：用户名、访问时间、密码等。
二、使用cookies
1、cookies的创建
document.cookies = name+"="+value;
cookies的创建需要给出cookies的名称和对应的cookies值，必备属性是cookies的名称name，除此之外，cookies还有四个另外的可选属性，分别是：expires属性、path属性、domain属性、secure属性。
2、给cookies命名
name属性是用来唯一表示cookies的，cookies的name属性可以自定义。与其他属性不同，document对象的cookies属性赋值时，并不会替代原来的值，而是会创建新的cookies。
eg：
document.cookies = "user=Tom";
document.cookies = "city=nanjing";
document.cookies = "age=20";
上面的三条语句，创建了三个cookies。创建多个cookies时可以用一条语句，中间用分号隔开即可。
因为cookies是通过HTTP来传递的，而HTTP不允许某个非字母和数字的字符被传递，因此cookies不能包含分号等特殊字符。为了解决这个问题，可以采用对cookies的名称和值在赋值前进行编码的方法。在JavaScript中，常用的编码方法是escape(),为了在读取的时候解码，相对应的一个解码方法是unescape().例如：
document.cookies = escape("user=Tom;city=nanjing;age=20");
3、定义cookies过期时间（expires属性）
（1）cookies是有生命周期的，为了能够让一个cookies能够在关闭浏览器后还能持续生效，就需要使用expires属性。expires需要使用格林尼治标准时间的文本字符串，格式如下：
Weekday Mon DD HH:MM:SS Time Zone YYYY
eg:
Mon Oct 22 13:22:34 PST 2012
（2）为了更好的控制时间，通常使用JavaScript的Date对象来进行时间的设置（这里就不列举Date对象的常用方法了，之前的学习中有详细的资料）
eg：
<script language="JavaScript">
var edate = new Date();
document.cookies = escape("user=Tom;expire="+edate.setFullYear(edate.getFullYear()+1));
</script>
以上代码，设置了过期时间为当前时间加一年。要想让一个cookies删除，通常也是使用expires属性设置为过去的某一个时间即可。例如：
<script language="JavaScript">
var edate = new Date();
document.cookies = escape("user=Tom;expire="+edate.setFullYear(edate.getFullYear()-1));
</script>
4、定义cookies的目录范围（path属性）
和变量的作用域一样，cookies一样有着自己的作用范围。path属性能使cookies能够被服务器上指定目录下的所有网站访问。
eg：cookies能够被服务器里www目录及其子目录下的任何网页访问到：
document.cookies = "user=Tom;path=/www";
如果cookies 能够被服务器上所有网页访问：
document.cookies = "user=Tom;path=/";
5、实现跨服务器共享（domain属性）
domain属性能够实现跨服务器的共享。比如对于某个网站的主站www.ds5u.com是一台服务器，但是其论坛站bbs.ds5u.com又是另一个服务器，博客站blog.ds5u.com又是另一台服务器。虽然这些网站都有各自的二级域名，但是用户是同一的，需要实现cookies的共享。例如：
document.cookies = "user=Tom;domain=.ds5u.com";
上述代码即可实现cookies在ds5u.com这个域所在的所有服务器共享。
6、使信息传输更加安全（secure属性）
secure属性规定cookies只能在安全的Internet上连接。通常情况下，此属性是忽略的，属性的可选值是true和false。
eg：
document.cookies = "user=Tom;secure=true";
三、让cookies存储信息
cookies 本身的使用是有限制的，在用户的计算机上，每个服务器或域只能保存最多20个cookies，而每个浏览器的cookies总数不能超过300，cookies的最大尺寸的4k，因此不能像使用变量一样，随意的创建cookies。考虑到cookies的限制，最有效的方法是将所有需要保存到cookies中的值链接为一个字串（使用分隔符分隔），然后把这个字串赋值给一个cookies。这样，只需要创建一个cookies，就能保存若干的信息了。读取时，按照分隔符的组合规则进行信息的提取和还原。
语法：
名称1=值1&名称2=值2&...&名称n=值n
eg：如果要保存姓名、年龄、性别、城市、邮编这五个消息，先将消息组合成一个字串：
user=Tom&age=25&sex=male&city=nanjing&zip=210000
然后创建一个cookies，因为字串中包含非字母和数字字符，因此在赋值前先进行编码：
document.cookie = "allinfo="+escape("user=Tom&age=25&sex=male&city=nanjing&zip=210000");
四、从cookies读取信息
创建cookies后，读取cookies信息直接访问属性即可：
document.cookie
document.cookie通常需要用unescape()方法进行解码，eg：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
<script language="JavaScript">
document.cookie = escape("user=Tom;city=nanjing;zip=21000");
alert("cookies的值："+unescape(document.cookie));
</script>
</head> <body> </body>
</html>
效果：
在这里得到的值是一个用分号分隔的字符串。可以通过String对象来获得每个cookies对应的值。eg：
*split():将字符串按照指定的分隔符分成数组。
*substring(starting index,ending index):提取从starting index开始到ending index结束的文本。
*indexOf(text,index):返回text参数内的第一个字符在字符串的位置。
eg：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>读取cookies</title>
</head>
<script language="JavaScript">
<!--
document.cookie = escape("username=tom;city=nanjing;zip=210000");
var allCookies = unescape(document.cookie);
var aryCookies = allCookies.split(";");
var nowvalue;
for( var i=0; i < aryCookies.length; i++ ){
nowvalue = aryCookies[i];
if( nowvalue.substring( 0, nowvalue.indexOf("=") ) == "zip" ){
document.write("cookies中保存的邮编是："+nowvalue.substring( nowvalue.indexOf("=")+1, nowvalue.length));
alert("cookies中保存的邮编是："+nowvalue.substring( nowvalue.indexOf("=")+1, nowvalue.length));
break;
}
}
//-->
</script> <body>
</body>
</html>
效果：
（只能在IE中显示）
五、实践
eg：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
<script language="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学习之cookies的更多相关文章
- JavaScript学习08 Cookie对象
JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...
- JavaScript学习基础部分
JavaScript学习基础 一.简介 1.JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer. Mozilla.Firefo ...
- JavaScript学习总结-技巧、有用函数、简洁方法、编程细节
整理JavaScript方面的一些技巧.比較有用的函数,常见功能实现方法,仅作參考 变量转换 //edit http://www.lai18.com var myVar = "3.14159 ...
- javascript学习路线图
史上最全的javascript学习路线图 JavaSctipt学习路线 完成整个课程大纲需要花上6~8周的时间,将学会完整的JavaScript语言(包括jQuery和一些HTML5).如果你没有时间 ...
- JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- JavaScript学习（3）：函数式编程
在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...
- JavaScript学习（2）：对象、集合以及错误处理
在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...
- JavaScript学习13 JavaScript中的继承
JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...
随机推荐
- BX2001: IE 支持使用 window.clipboardData 访问系统剪贴板，Chrome 和 Safari 中存在类似的 Clipboard 对象但尚未实现，Firefox 和 Opera 不支持这类对象
http://www.w3help.org/zh-cn/causes/BX2001 标准参考 无 问题描述 IE 支持使用 window.clipboardData 对象内的一系列方法访问系统剪贴板: ...
- silverlinght 项目
silverlinght项目演示: 打开点击其中一个:
- Palindrome Partitioning II Leetcode java
题目: Given a string s, partition s such that every substring of the partition is a palindrome. Return ...
- Java 读写图像
Java中进行图像I/O(即读图片和写图片,不涉及到复杂图像处理)有三个方法:1. Java Image I/O API,支持常见图片,从Java 2 version 1.4.0开始就内置了.主页:h ...
- 使用RBTool自动提交code review请求
使用RBTool自动提交code review请求 前言 让我们回想一下手工提交review请求的过程: 首先得用 svn diff > filename.diff 生成diff文件. 然后输入 ...
- ARC指南2 - ARC的开启和禁止
要想将非ARC的代码转换为ARC的代码,大概有2种方式: 1.使用Xcode的自动转换工具 2.手动设置某些文件支持ARC 一.Xcode的自动转换工具 Xcode带了一个自动转换工具,可以将旧的源代 ...
- Ubuntu 15.10安装elementary desktop
elementaryOS的风格类似于macos,基于Ubuntu改造,个人比较喜欢其界面理念,简单清晰.因此下载了elementaryOS Freya使用,使用过程中,各个软件版本的升级比较落后,比如 ...
- php数组操作，删除第一个和最后一个元素
对于一个php数组,该如何删除该数组的第一个元素或者最后一个元素呢?其实这两个过程都可以通过php自带的函数 array_pop 和 array_shift 来完成,下面就具体介绍一下如何来操作. ( ...
- 【转】SSM框架——详细整合教程（Spring+SpringMVC+MyBatis）
原文地址:http://blog.csdn.net/zhshulin/article/details/37956105 使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了, ...
- mongodb 手动分片的命令汇总
手动分片的操作 自动分片会带来性能的下降. 所以要合理使用手动分片. 并且配合Tag一起使用. # 对于4个shard的程序, 预先处理的指令1. 加入分片服务器sh.addShard( " ...