JS通过操作cookie定制栏目

发布时间:2021-06-17 17:11 | 人气数:226
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>js栏目定制</title>
<style>
  *{margin:0; padding:0}
   #header  ul li {float:left; width:80px; height:30px; text-align:center; line-height:30px; list-style:none;}
  .navTop {   height:40px;background-color:#258DEB;font-size: 24px;
font-weight: bold;  text-align:center           }
  .addlist,.box{ width:100%; border:1px  #333333 solid; padding:45px 0; overflow:hidden;}
  .addlist ul,.box ul { list-style:none}
  .addlist ul li,.box ul li{ width:24.4%; border:1px solid #999; float:left; margin-left:5px; text-align:center}
  .addlist ul li:hover,.box ul li:hover{ background:#CCC}
  .his {float:left      }
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js " charset="UTF-8"></script>
<script>
$(function(){
       createNav();
if(!getCookie("cookUid")) {
 setCookie('cookUid',randomString(16));    
}
//获取cookie中的菜单数据并插入到页面
    if(getCookie("nav")){
var nowNav = getCookie("nav").split(",");
var noSelect = getAddList();
var html='';
var addHtml = "";
  for(var i=0; i<nowNav.length; i++){
 html += '<li onclick="removeThis(this)">'+nowNav[i]+'</li>';
 for(var j=0; j<noSelect.length; j++){
    if(nowNav[i]==noSelect[j]){
   //如果有重复,移除
   delLi(noSelect[j]);
}
 }
  }   
$(".box ul").html(html)
}

      $('#save').click(function() {       
    txt=getCookie('nav');
cookUid = getCookie('cookUid');
// alert(txt);
            $.post("http://192.168.1.81:82/advManger/",{cookieset:txt,cookUid:cookUid},function(result){
           res = eval("("+result+")");;
   console.log(res);
                         if(res.err_code==200) {
                             alert('定制成功');
 } else {
 alert('定制失败'); 
 }
                   });       
    }); 
})    
     //从Cookie中获取菜单列表
     function getCookieNavInfo(){}
     //获取未选
     function getAddList(){
 var addLi = $(".addlist ul li"),addListArr = [];
 for(var i = 0;i<addLi.length;i++){
addListArr.push(addLi[i].innerHTML)
 }
 return addListArr;
 }  
 //移除标签
 function delLi(text){
    var addLi = $(".addlist ul li")
for(var i=0; i<addLi.length; i++){
if(addLi[i].innerHTML == text)
             addLi[i].remove();
}
 }
 
 //添加菜单事件
 function addThis(bnt){
var liLength = $(".box ul li");
//如果已选超过N个,禁止再选
if(liLength.length>5){
    alert("最多只能选5个");
return false;
} else {
    $(".box ul").append('<li onclick="removeThis(this)">'+$(bnt).html()+'</li>')
$(bnt).remove();
saveCookie()
}
 }
 
 //移除菜单事件
 function removeThis(bnt){
$(".addlist ul").append('<li onclick="addThis(this)" title="'+bnt.title+'">'+$(bnt).html()+'</li>')
    $(bnt).remove();
saveCookie()
 }
 
 //存入Cookie obj
 function saveCookie(){
 //获取已选标签
 var li = $(".box ul li"),navArr = [];
 //将已选标签文字存入数组
 for(var i = 0;i<li.length;i++){
     navArr.push(li[i].innerHTML)
 }
 //将数组存入Cookie
 setCookie('nav',navArr)
 }
 
 //存入Cookie函数
 function setCookie(name, value){ 
document.cookie = name + "="+ value; 
 } 
 
 //获取Cookie内容
 function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
   return unescape(arr[2]);
} else {
   return null;
}
 }
      //生成一个唯一的cookieuid作为当前的用户识别身份  
   function randomString(len) {
  len = len || 32;
  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  var maxPos = $chars.length;
  var pwd = '';
  for (i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
}
   
     function   createNav() {         
 url = 'http://www.wifijun.com/';  
    var nowNav = getCookie("nav").split(",");
navList ='<ul>'
  for(var i=0; i<nowNav.length; i++){
     navList +=  "<li class='menu-item'><a href='"+url+changeUrl(nowNav[i])+"/'>"+nowNav[i]+"|</a></li>";
  }  
  navList  +='</ul>'
  $('#navList').html(navList);
}
//对关键词的转换
function  changeUrl(val) {
   if(val=='热点'){
       return   'redian';
   }
     if(val=='财经') {
       return   'finance';
 }
    if(val=='娱乐') {
       return   'yule';
}
      if(val=='微信') {
       return   'weixin';
  }
    if(val=='美女') {
       return   'meinv';
}
     if(val=='淘品') {
       return   'taopin';
 }
    if(val=='搞笑') {
       return   'joke';
}
}
       //访问对应的api接口进行栏目的映射访问
function  mapNav(hanzi,pinyin) {
             arrHz = hanzi.split(',');
 arrPy = pinyin.split(',');
 arr = [];
 for(i=0;i<arrHz.length;i++) {
                     arr[arrHz[i]]=arrPy[i];
 }
               return   arr;
}
        //通过中文获取对应的栏目映射
function  getNav(val) {
              arr = mapNav('','');
  if(arr[val])  return  arr[val];
}
var hafuNav =  {
}

</script>
</head>
<body>
<div class='navTop'><span  id='back'   class='his'><a href="javascript:history.go(-1);location.reload()">返回</a></span> 频道定制</div>
<div> 点击删除频道</div>
<div class="box">
  <ul>
    <!-- 已选项 -->
  </ul>
</div>
<div>  点击添加频道</div>
<div class="addlist" style="clear:both">
  <ul>
    <li onclick="addThis(this)">热点</li>
    <li onclick="addThis(this)">财经</li>
    <li onclick="addThis(this)">娱乐</li>
    <li onclick="addThis(this)">美女</li>
 <li onclick="addThis(this)">淘品</li>
    <li onclick="addThis(this)">搞笑</li>
  </ul>
</div>
<div><button type='button'  id='save'> 保存我的定制</button> </div>
<div id='header'>  首页|<span  id='navList'>热点  </span> </div>
</body>
</html>
关键词:JS cookie操作,定制栏目