JS操作Cookies包括(读取添加与删除)


Posted in Javascript onDecember 26, 2012

一直都是简单去js实现cookie的一些操作,今天把js对cookie操作系统的整理了一遍,包括:js读取cookie,js添加cookie,js删除cookie,示例如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 
<title>cookie处理函数练习(为我所写,非我所想:改善面向对象)</title> 
<script language="JavaScript" type="text/javascript"> 
function addCookie(objName,objValue,objHours){//添加cookie 
var str = objName + "=" + escape(objValue); 
if(objHours > 0){//为0时不设定过期时间,浏览器关闭时cookie自动消失 
var date = new Date(); 
var ms = objHours*3600*1000; 
date.setTime(date.getTime() + ms); 
str += "; expires=" + date.toGMTString(); 
} 
document.cookie = str; 
alert("添加cookie成功"); 
} 
function getCookie(objName){//获取指定名称的cookie的值 
var arrStr = document.cookie.split("; "); 
for(var i = 0;i < arrStr.length;i ++){ 
var temp = arrStr[i].split("="); 
if(temp[0] == objName) return unescape(temp[1]); 
} 
} 
function delCookie(name){//为了删除指定名称的cookie,可以将其过期时间设定为一个过去的时间 
var date = new Date(); 
date.setTime(date.getTime() - 10000); 
document.cookie = name + "=a; expires=" + date.toGMTString(); 
} 
//读取出来所有的cookie字?串了 
function allCookie(){//读取所有保存的cookie字符串 
var str = document.cookie; 
if(str == ""){ 
str = "没有保存任何cookie"; 
} 
alert(str); 
} 
function $(m,n){ 
return document.forms[m].elements[n].value; 
} 
function add_(){ 
var cookie_name = $("myform","cookie_name"); 
var cookie_value = $("myform","cookie_value"); 
var cookie_expireHours = $("myform","cookie_expiresHours"); 
addCookie(cookie_name,cookie_value,cookie_expireHours); 
} 
function get_(){ 
var cookie_name = $("myform","cookie_name"); 
var cookie_value = getCookie(cookie_name); 
alert(cookie_value); 
} 
function del_(){ 
var cookie_name = $("myform","cookie_name"); 
delCookie(cookie_name); 
alert("删除成功"); 
} 
</script> 
//添加cookie 
function addCookie(name,value,expires,path,domain){ 
var str=name+"="+escape(value); 
if(expires!=""){ 
var date=new Date(); 
date.setTime(date.getTime()+expires*24*3600*1000);//expires单位为天 
str+=";expires="+date.toGMTString(); 
} 
if(path!=""){ 
str+=";path="+path;//指定可访问cookie的目录 
} 
if(domain!=""){ 
str+=";domain="+domain;//指定可访问cookie的域 
} 
document.cookie=str; 
} 
//取得cookie 
function getCookie(name){ 
var str=document.cookie.split(";") 
for(var i=0;i<str.length;i++){ 
var str2=str[i].split(”=”); 
if(str2[0]==name)return unescape(str2[1]); 
} 
} 
//删除cookie 
function delCookie(name){ 
var date=new Date(); 
date.setTime(date.getTime()-10000); 
document.cookie=name+”=n;expire=”+date.toGMTString();

[下面讲的经个人觉得比较好哦!]
我们当然还得介绍cookie的四个属性。这些属性用下面的格式加到字符串值后面:
name=<value>[; expires=<date>][; domain=<domain>][; path=<path>][; secure]
名称=<值>[; expires=<日期>][; domain=<域>][; path=<路径>][; 安全]
<value>, <date>, <domain> 和 <path> 应当用对应的值替换。<date> 应当使用GMT格式,可以使用Javascript脚本语言的日期类Date的.toGMTString() 方法得到这一GMT格式的日期值。方括号代表这项是可选的。比如在 [; secure]两边的方括号代表要想把cookie设置成安全的,就需要把"; secure" 加到cookie字符串值的后面。如果"; secure" 没有加到cookie字符串后面,那么这个cookie就是不安全的。不要把尖括号<> 和方括号[] 加到cookie里(除非它们是某些值的内容)。设置属性时,不限属性,可以用任何顺序设置。

下面是一个例子,在这个例子里,cookie "username" 被设置成在15分钟之后过期,可以被服务器上的所有目录访问,可以被"mydomain.com"域里的所有服务器访问,安全状态为安全。

// Date() 的构造器设置以毫秒为单位 
// .getTime() 方法返回时间,单位为毫秒 
// 所以要设置15分钟到期,要用60000毫秒乘15分钟 
var expiration = new Date((new Date()).getTime() + 15 * 60000); 
document.cookie = "username=" + escape(form.username.value)+ "; expires =" 
+ expiration.toGMTString() + "; path=" + "/" + "; _ 
domain=" + "mydomain.com" + "; secure"; 
// 我们定义一个函数,用来读取特定的cookie值。[得到指定名字的cookie对象哦!] 
function getCookie(cookie_name) 
{ 
var allcookies = document.cookie; 
var cookie_pos = allcookies.indexOf(cookie_name); 
// 如果找到了索引,就代表cookie存在, 
// 反之,就说明不存在。 
if (cookie_pos != -1) 
{ 
// 把cookie_pos放在值的开始,只要给值加1即可。 
cookie_pos += cookie_name.length + 1; 
var cookie_end = allcookies.indexOf(";", cookie_pos); 
if (cookie_end == -1) 
{ 
cookie_end = allcookies.length; 
} 
var value = unescape(allcookies.substring(cookie_pos, cookie_end)); 
} 
return value; 
} 
// 调用函数 
var cookie_val = getCookie("username");

3.为什么我设置了cookie的过期时间如果为关闭的时候就自动清空的话怎么没用呢?
来研究一下JSP操纵cookie?
Cookie概念:
Cookie的格式实际上是一段纯文本信息, 由服务器随着网页一起发送到客户端, 并保存在客户端硬盘中指定的目录的. 大家都传说Cookie会造成严重的安全威胁什么的, 其实不是这么回事情. 服务器读取Cookie的时候, 只能够读取到这个服务器相关的信息. 而且, 浏览器一般只允许存放300个Cookie, 每个站点最多存放20个, 而且, 每个Cookie的大小现在在4K, 根本不会占用多少空间. 并且, Cookie是有时效性质的. 例如, 设置了Cookie的存活时间为1分钟, 则一分钟后这个Cookie就会被浏览器删除
Cookie版本:
目前有两个版本:
版本0 : 由Netscape公司制定的,也被几乎所有的浏览器支持. Java中为了保持兼容性, 目前只支持到版本0, Cookie的内容中不能空格,方括号,圆括号,等于号(=),逗号,双引号,斜杠,问号,@符号,冒号,分号。
版本1 : 根据RFC 2109文档制定的. 放宽了很多限制. 上面所限制的字符都可以使用. 但为了保持兼容性, 应该尽量避免使用这些特殊字符.
JSP中对Cookie的操作: 类型 方法名 方法解释
String getComment() 返回cookie中注释,如果没有注释的话将返回空值.
String getDomain() 返回cookie中Cookie适用的域名. 使用getDomain() 方法可以指示浏览器把Cookie返回给同 一域内的其他服务器,而通常 Cookie只返回给与发送它的服务器名字完全相同的服务器。注意域名必须以点开始
int getMaxAge() 返回Cookie过期之前的最大时间,以秒计算。
String getName() 返回Cookie的名字
String getPath() 返回Cookie适用的路径。如果不指定路径,Cookie将返回给当前页面所在目录及其子目录下 的所有页面。
boolean getSecure() 如果浏览器通过安全协议发送cookies将返回true值,如果浏览器使用标准协议则返回false值。
String getValue() 返回Cookie的值。笔者也将在后面详细介绍getValue/setValue。
int getVersion() 返回Cookie所遵从的协议版本。
void setComment(String purpose) 设置cookie中注释
void setDomain(String pattern) 设置cookie中Cookie适用的域名
void setMaxAge(int expiry) 以秒计算,设置Cookie过期时间。
void setPath(String uri) 指定Cookie适用的路径。
void setSecure(boolean flag) 指出浏览器使用的安全协议,例如HTTPS或SSL。
void setValue(String newValue) cookie创建后设置一个新的值。
void setVersion(int v) 设置Cookie所遵从的协议版本
一个简单的例子
1. 写入Cookie --- writecookie.jsp
-------------------------------------------------------------
<%@ page contentType="text/html; charset=ISO8859_1" %> 
<% 
Cookie _cookie=new Cookie("user_delfancom", "delfan"); 
_cookie.setMaxAge(30*60); // 设置Cookie的存活时间为30分钟 
response.addCookie(_cookie); // 写入客户端硬盘 
out.print("写Cookie完成"); 
%>

2. 读取Cookie.jsp --- readcookie.jsp
-------------------------------------------------------------
<% 
Cookie cookies[]=request.getCookies(); // 将适用目录下所有Cookie读入并存入cookies数组中 
Cookie sCookie=null; 
String sname=null; 
String name=null; 
if(cookies==null) // 如果没有任何cookie 
out.print("none any cookie"); 
else 
{ 
out.print(cookies.length + "<br>"); 
for(int i=0;i<cookies.length; i++) // 循环列出所有可用的Cookie 
{ 
sCookie=cookies[i]; 
sname=sCookie.getName(); 
name = sCookie.getValue(); 
out.println(sname + "->" + name + "<br>"); 
} 
} 
%>

需要注意的两个问题:
1. Cookie有个适用路径的问题, 就是说如果 writecookie.jsp和readcookie.jsp要放在同意目录下, 如果不在同一目录下, 则写的时候需要设置路径,为readcookie.jsp所在的路径.
2. 读入Cookie数组的时候需要判断是否为空(null), 网上很多代码都没有写出这一点.
Javascript 相关文章推荐
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
Node.js模块加载详解
Aug 16 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 #Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 #Javascript
window.open以post方式将内容提交到新窗口
Dec 26 #Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 #Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 #Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 #Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 #Javascript
You might like
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
php实现的http请求封装示例
2016/11/08 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
用python绘制樱花树
2020/10/09 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
社区党总支书记先进事迹材料
2014/01/24 职场文书
创先争优活动方案
2014/02/12 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
2014年连锁店圣诞节活动方案
2014/12/09 职场文书
聘任书的格式及模板
2019/10/28 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python