jquery-cookie的簡單演示

注意事項：
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>