var d = new Date();
    d.setDate(d.getDate()+day);//设置day天后清除缓存删除设置的时间;

  

 

简单的总结了一下cookie的使用,之前总是有迷惑的地方,感觉总结之后要清晰了许多

1. cookie

定义 : cookie是小量信息,由网络服务器发送出来以存储在网络浏览器上,从而下次这位独一无二的访客有回到该网络服务器时,可从该浏览器读回此信息。
 
使用原因:web程序是使用HTTP协议传输的,而HTTP协议是无状态的协议,对于事物处理没有记忆能力;缺少状态意味着如果后续处理需要前面的信息,则他必须重传,这样导致每次连接传送的数据量增加;cookie产生是为了弥补HTTP协议的不足;
终止条件:结束浏览器对话时候,即终止所有的cookie;
 
特点:(1)只能存储文本文件 (2)文本文件有大小限制4kb (3)数量限制50条 (4)读取有域名限制 不可跨越读取 (5)时效限制
 
使用时注意:
 
(1) document.cookie:当获取页面中的cookie值和名字符串类型;前页面存在,关闭后就没有了;document.cookie = "user = yanghuaizhi;pass = 123"
(2) 时效性:必须是日期对象;
    
 var d = new Date();
    d.setDate(d.getDate()+day);//设置day天后清除缓存删除设置的时间; 
 
(3)cookie路径 :但凡路径不同视为两个cookie;
 
(4)存储cookie
 function setCookie(name,path){
	 document.cookie = name +"="+ value+";path="+path+";expires="+d
 }
  setCookie("pass","123")

(5) 移除cookie

  function removeCookie(name,path){
	 setCookie(name,null,-1,path)
  }
  removeCookie("pass","/");

(6)获取getCookie

 function getCookie(name){
                var sCookie = document.cookie;//获取当前页面的cookie;
                var aCookie = sCookie.split(";");//将获取的字符串转化为数组;[]
                for(var i = 0; i < aCookie.length; i ++){//遍历数组,转化为单个数组;
                   var aCookieItem = aCookie[i].split("=");//将数组中的等号删除;
                          if(aCookieItem[0] == name){//传入的参数等于名字;
                             return aCookieItem[1];
                            }
                         }
                        return "";//如果没有获取到就返回空
                         }
                         getCookie("pass");
(10).小案例 购物车;//需要用到拼接时候获取的json
                         var d = new Date();
                          d.setDate(d.getDate() + 7);
                           var cookieKey = "product_" + res[i].id;
                           var cookieValue = "{name:'res[i].name'}";
                           document.cookie = cookieKey + "=" + cookieValue;
                           var arr = document.cookie.split(";");
                           for(var i = 0; i < arr.length; i ++){
                           	 var val = arr[i].split("=");//{name:'张三',price:'¥34.0',num:2};实际上有"";
                           	 if(val[0].indexOf(cookieKey) == 0){
                           	 	   var p = eval("("+val[1]+")");//将字符串""删去;
                           	 	   console.log(p.price);
                           	 }
                           }

2.$cookie

语法:$.cookie(名称,值,[option])
 
(1)读取cookie值
$.cookie(cookieName);

  

 
(2)写入设值
$.cookie(cookieName,cookieValue);
$.cookie(cookieName,NULL);//销毁名为他的cookie;
 
(3)[option]参数说明
 
expires:有限日期;不设置的时候关闭浏览器的时候就消失了;
path:保存路径;默认和创建页路径一样;跨域二级域名有效要设值".xx.com"
secrue:默认为false,是否需要一个安全协议HTTP
 
(4)$.cookie("name",$(value).val(),{path:"/",expires:"7"});
 
注意点;cookie本质上是一个txt文本,只能够存入字符串,对象通常要序列化,而取得时候要反序列才得到对象;
 
(1)需要注意:同时存储多个数据的时候;在数组和字符串之间转换;
(2)数组=>修改数据
(3)字符串=》放进cookie之中
(4)没有cookie的情况下建立数据结构;有cookie的时候向结构中插入
(5)判断是否有cookie
        
 if($.cookie("o") == null){
               var o = {name:"zz",age :24};
               var str = JSON.stringify(0);//序列化后成字符串存入cookie
               $.cookie("o",str,{expires:7});
               alert("为空");
             }else{ //存在读出来
               var str1 = $.cookie("o");
               var 01 = JSON.parse(str1);//字符串反序列化对象,输出对象的姓名值;
               alert(01.name);
             }

(6)存储cookie中可能出现的问题  

报错 : google浏览器 提示:has no method $.cookie 火狐浏览器提示:$.cookie is not a function ;可能是同一个页面两次或者多次引入jquery插件

$.cookie小案例 购物车

 

 //需要注意:同时存储多个数据的时候;在数组和字符串之间转换;
                      //数组=>修改数据
                      //字符串=》放进cookie之中
                      //没有cookie的情况下建立数据结构;有cookie的时候向结构中插入;
                        if(!$.cookie("goods")){
			//不存在
			$.cookie("goods",'[{"id":'+id+',"num":1}]');
			}else{
			//数据结构存储
				var cookie = $.cookie("goods");
				var cookieArr = JSON.parse(cookie);
				var same = false;//是否建立存储数据的模式
				for(var i = 0; i < cookieArr.length;i ++){
				if(cookieArr[i].id == id){
				//数据结构中存在当前的商品
			         	cookieArr[i].num++;
					same = true;
					break;
				}
			}
			if(same == false){
			var obj = {//不相等存入
			id : id,
	          	num : 1
		  };
			  cookieArr.push(obj);
		}
				
													cookie  = JSON.stringify(cookieArr);//存进cookie
													$.cookie("goods",cookie);
                    (2)获取数量
                       howMany(){
			if($.cookie("goods")){
			    var acookie = JSON.parse($.cookie("goods"))
			}
	                       var res = 0;
				for(var  i = 0; i < acookie.length;i++){
				  res += acookie[i].num;
			  }
										        
				 return res;
									    	}

  

posted on 2017-12-02 12:08  Anby-PBH  阅读(1152)  评论(0编辑  收藏  举报