JS通过操作cookie定制栏目
发布时间：2021-06-17 17:11 | 人气数：1114
<!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操作,定制栏目
