cookie 前端操作

喜欢ヅ旅行 2021-07-24 22:06 406阅读 0赞

数据持久化操作
    
      将数据长久保持在客户端，实现网站长久登录效果
        cookie
          可以认为是记录简单内容的文本文件
          绑定在html页面上
    
      cookie设置分为前端设置和后端设置
    
        前端设置cookie:
          
          *注意:前端操作cookie时，时间戳必须通过toGMTString()方法转换成标准时间戳
    
          1、写入cookie:
            document.cookie='保存的键=保存的键值;expires=过期时间戳;key3=value3;...'
    		前两个为必要的
    
          2、读取cookie:
            console.log(document.cookie);
    
          3、删除cookie:
            document.cookie='要删除的键=要删除的值;expires=当前时间戳+1';
    
          4、将cookie保存值转换成对象
    
            按=号分割成数组然后存入对象
            document.cookie.split('='); 按=号分割成数组
            obj={};
            obj[arr[0]]=arr[1];
            
    	  5、多条cookie处理(每个键值对按;分号分隔,第二个键值对分隔后会有空格，所以trim()去掉)
    	
    		var arr=document.cookie.split(';');
    		var obj={};
    		for(var i=0;i<arr.length;i++)
    		{
    			var arr2=arr[i].trim().split('=');
    			obj[arr2[0]]=arr2[1];
    		}
    		
    	  6、处理类似json对象的复杂类型
    
    		因为cookie存储的是字符串，所以要先将复杂类型转换成字符串,json类型对象,使用
    		JSON.stringify(..);转换成字符串存储进cookie，读取时再通过JSON.parse(..)转换成
    		json对象
    			
    		**存储json对象**
    		
    		var info={
    			peoName:'mike',
    			peoAge:18,
    			peoGender:'female'
    		};
    		var cookieStr=JSON.stringify(info);
    		var expires=new Date(new Date().getTime()+3600*1000*24).toGMTString;
    		document.cookie='userInfo='+cookieStr+';expires'+expires;
    		
    		**将cookie中存储的字符串转换成 cookie**
    		
    		var arr=document.cookie.split(';');
    		var obj={};
    		for(var i=0;i<arr.length;i++)
    		{
    			var arr2=arr[i].trim().split('=');
    			obj[arr2[0]]=arr2[1];
    		}
    		cJSON.parse(obj['userInfo'];
    				
    
    localStorage
    sessionStorage

代码示例：

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<style>
    	</style>
    	
    </head>
    <body>
      
    	<script>
        document.cookie='uname=jeff;expires='+expires
        //保存当前时间戳后1000秒
        var expires=new Date(new Date().getTime()+1000*1000).toGMTString();
         console.log(document.cookie);
        
        //cookie内容转换成对象
    
       var obj={ };
        var arr=document.cookie.split('=');
        for(var i=0;i<=arr.length;i++)
        { 
          obj[arr[0]]=arr[1];
        }
    
        //删除cookie
        var expires=new Date(new Date().getTime()+1).toGMTString();
        document.cookie='uname=jeff;expires='+expires;
    	</script>
    	
    </body>
    
    </html>