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若是能在前端解決的話 就完美了。