cookie 前端操作

最新推荐文章于 2022-06-22 16:19:17 发布

神奇大叔

最新推荐文章于 2022-06-22 16:19:17 发布

阅读量909

点赞数

分类专栏： cookie 文章标签： cookie

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103950264

版权

cookie 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

数据持久化操作

  将数据长久保持在客户端，实现网站长久登录效果
    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>