最近需要些一个小Demo，前端页面通过javascript设置cookie ，后台页面通过cookie读取cookie 并在另一张页面上输出在前端点击过的图片。
具体实现方法：
ody>
<div style="text-align:center">
<h2 id="h2">图片信息</h2>
<div id="showPic">
</div>
</div>
</body>
普通的html代码
var cookie_Str = ‘‘;
var pic = new Array();
window.onload=function ()
{
//ajax将后台数据返回值前端
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 &&xmlhttp.status==200)
{
//console.log("ajax success");
var obj = JSON.parse(xmlhttp.responseText);
for(var i = 0;i<obj.length;i++)
{
pic.push(obj[i].picname);
//console.log(obj[i].picname)
}
//在前端页面画出html代码
var html = "<img id=‘img‘ style=‘margin:auto;border:2px solid red;width:80%;cursor: pointer;‘ onclick=‘submit1()‘ src=‘"+pic[0]+"‘ alt=‘###‘/>";
for(var i = 1;i <pic.length;i++)
{
html +="<br/>";
html +="<img class=‘img‘ style=‘margin:auto;border:2px solid red;width:80%;cursor: pointer;‘ onclick=‘submit1()‘ src=‘"+pic[i]+"‘ alt=‘###‘ />";
}
document.getElementById("showPic").innerHTML=html;
//alert(obj)
//alert("success");
}
}
xmlhttp.open("GET","admin.php",true);
xmlhttp.send();
}
function submit1()
{
$("img").click(function(){
$str = $(this).attr(‘src‘);//点中图片的url
console.log($str);
cookie_Str +=" "+$str;
console.log(cookie_Str);
//alert(cookie_Str)
//alert($str);
setCookie(‘url‘,cookie_Str,1);
});
}
//设置cookie
function setCookie(c_name,value,expiredays)
{
var exdate = new Array();
exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
javascript代码
先通过ajax后台数据库读取图片的url，然后使用innerHtml在前端页面画出img，这里推荐使用JQuery，因为JQuery获取对象比较容易，设置对象的属性也比较容易。
在每条img中加入一个onclick事件 用于设置cookie，这里使用了jquery中的attr（）获取被点击的img的src，但是会出一个bug，当点击多个img之后cookie_Str +=" "+$str;
出来的内容或将之前的onclick方法重新运行一遍。这里我使用后台页面将重复的数据删除。当然前端也可设置。然后调用setCookie 设置cookie 三个参数分别是cookie名
cookie值 cookie的时间。这里还有一个更好的解决方法。通过src jquery中的jquery.cookie.js文件直接。cookie就可以设置cookie了
cookie.php
<?php
$url = trim($_COOKIE[‘url‘]);
//echo $url;
$arr1 = explode(‘ ‘,$url);
//var_dump($arr1);
//$arr2 = array_unique($arr1);
$newArr=array_map(function ($v){return array(‘name‘=>$v);},$arr1);
echo json_encode($newArr);
?>
后台php代码 经过删除空格 拆分成数组 去掉重复元素（出来的是一个二元数组） json格式编码 输出
show.html
window.onload=function()
{
var pic = new Array();
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 &&xmlhttp.status==200)
{
var obj = JSON.parse(xmlhttp.responseText);
console.log(pic);
for(var i = 0;i<obj.length;i++)
{
console.log(obj[i].name)
pic.push(obj[i].name);
}
//在前端页面画出html代码
var html = "<img id=‘img‘ style=‘margin:auto;border:2px solid red;width:80%;cursor: pointer;‘ onclick=‘submit1()‘ src=‘"+pic[0]+"‘ alt=‘###‘/>";
for(var i = 1;i <pic.length;i++)
{
html +="<br/>";
html +="<img class=‘img‘ style=‘margin:auto;border:2px solid red;width:80%;cursor: pointer;‘ onclick=‘submit1()‘ src=‘"+pic[i]+"‘ alt=‘###‘ />";
}
document.getElementById("showPic").innerHTML=html;
}
}
xmlhttp.open("GET","cookie.php",true);
xmlhttp.send();
}
前端显示代码
通过ajax获取后台传过来的数据
使用innerHTml写代码
到这里 这个小Demo就差不多完成了。遇到的bug如果能在前端解决的话 就完美了。