Javascript 设置cookie 后台php得到cookie 并读出在前端所点击过的图片

　　最近须要些一个小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若是能在前端解决的话 就完美了。