juery对于cookie的操作以及cookie加密

最新推荐文章于 2024-08-14 14:55:14 发布

yanguo110

最新推荐文章于 2024-08-14 14:55:14 发布

阅读量414

点赞数

分类专栏：前端知识

本文链接：https://blog.csdn.net/yanguo110/article/details/80859223

版权

前端知识专栏收录该内容

9 篇文章 0 订阅

订阅专栏

#####------------------------------------------完整项目url------------------------------------------

####需求：在项目中需要做出如下的页面，需求是获取cookie并生成32位的key。

######问题一：

问题描述：缓存不被支持
解决办法：有的浏览器不支持本地存储，比如Google浏览器，推荐使用IE浏览器，当然可以使用下面的代码可以判断浏览器是否支持本地缓存：

/**
*查看是不是此浏览器支不支持本地存储cookie
**/
var dt = new Date(); 
dt.setSeconds(dt.getSeconds() + 60); 
document.cookie = "cookietest=1; expires=" + dt.toGMTString(); 
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; 
	if(!cookiesEnabled) { 
		//alert("没有启用cookie ");
	} else{
		//alert("已经启用cookie ");
	}
	//alert($.cookie('xid'));
	if($.cookie('xid')=="null"||$.cookie('xid')==undefined){
		$("#hiddenId").val(0);
		$("#stop").show();
		$("#use").hide();
		$(".pri_btn_stop").val("启用Cookie");
	}else{
		$("#hiddenId").val(1);
	}
})

######问题二：缓存删除不了

问题描述：删除之后会null，但是在重启浏览器的时候，发现缓存还在。
解决办法：原来cookie(“name”,value)换成 $.cookie(‘xid’, valueStr,{path:"/"}); 形式；

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/h1.js"></script>
</head>
<html>
<body>
<div class="new_text_right">
  <div class="privacybox">
    <div class="pri_stop" id="stop" style="display:none;">
	<div id="img_id"></div>
      您已经停用Cookie记录，如要启用，请点击“启用Cookie”按钮
    </div>
    <div class="pri_stop"  id="use">
	<div id="img_id"></div>
      您已经启用Cookie记录，如要停用，请点击“停用Cookie”按钮
    </div>
	<input type="hidden" id="hiddenId" value=1/>
	<div id="pri_btn_id">
		<input type="button"  class="pri_btn_stop" value="停用Cookie" onClick="cookie_h1.setCookiesfn(this);"/>
	</div>
  </div>
</div>
</body>
<style>
#img_id{
	float:left;
	width:3px;
	height:14px;
	background: #5cc1f0;
	margin-right:6px;
	margin-top:4px;
}
  .new_text_right{
    background: #ffffff;
    width:470px;
	height:170px;
	margin:auto;
  }
  #pri_btn_id{
	margin-left:144px;
	margin-top:5px;
		width:180px;
  }
  .pri_btn_stop{
  cursor:pointer;
    border: none;
    color: white;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
	border-radius: 4px;
	background: #5cc1f0;
	padding:0px 10px;
	height: 38px;
	width: 134px;
  }
  .pri_stop{
  	margin-left:30px;
	margin-top:30px;
   font-family: '微软雅黑';
	line-height: 22px;
	width:360px;
	height: 37px;
	font-size:12px;
    padding-top: 40px;
	padding-bottom: 10px; 
  }
</style>
</html>
</html>