jquery-cookie的简单演示

最新推荐文章于 2024-03-14 07:30:00 发布

qq236710052

最新推荐文章于 2024-03-14 07:30:00 发布

阅读量157

点赞数

分类专栏：前端 JavaScript jQuery 文章标签： javascript js jquery

本文链接：https://blog.csdn.net/qq236710052/article/details/104383202

版权

前端同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

注意事项：
1、需要在服务器环境下打开
2、只是一个页面的代码，请自行多复制几个
3、最好打开控制台观察逻辑和流程

-----------------------JS---------------------

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(document).ready(function(){
	//获取cookie
	var imglist=$.cookie('img');
	//抓取img里src
	var img=$("img").attr("src");
	if(imglist){
		console.log("有cookie，继续看看有没有重复");
		//有cookie，继续看看有没有重复
		var imgarr = imglist.split(",");
		//console.log(imgarr);
		if($.inArray(img,imgarr)==-1){
			console.log("没有重复，添加进去");
			//还没有记录的时候拼接并且保存cookie
			var imging=imglist+","+img;
			$.cookie('img',imging);	
		}else{
			console.log("重复了，不添加");
		}			
	}else{
		console.log("没有cookie，记录下来");
	    //没有cookie，记录下来
	    $.cookie('img',img);
	}		
});
</script>
<script>
$(document).ready(function(){
	var box=$.cookie('img');
	var boxarr = box.split(",");
	//console.log(boxarr);
	var html = "";
	$.each(boxarr, function(key, val) {
		html += "<img src="+val+">";
	});
	$(".box").html(html);
});
</script>

----------------------------------HTML------------------------------------

<a href="index.html">连接1</a>  
<a href="index1.html">连接2</a>
<a href="index2.html">连接3</a>
<div class="img"><img src="imges/3.png"/></div>
<br/><br/><br/>
历史记录：<br/><br/>
<div class="box"></div>