首页 > 代码库 > 使用cookie记录点击/浏览历史并以json格式存入
使用cookie记录点击/浏览历史并以json格式存入
好久没写博客了。今天就写一个小demo。
使用cookie记录每次点击的历史记录,并且以json的格式存入cookie,如果相同的浏览记录,则不记录
demo中只设置了记录最新的3条数据。。
if (len > 2) { json1.splice(0, 1); }
更多的可修改下面代码中的 2。
具体代码如下:
html部分:
<div class="clx-3"> <ul id="searchCityListB"> <li><a class="col1" data-areaId="1" >测试1</a></li> <li><a class="col1" data-areaId="2" ><span class="">测试2</span></a></li> <li><a class="col1" data-areaId="3" ><span class="">测试3</span></a></li> <li><a class="col1" data-areaId="4" ><span class="">测试4</span></a></li> <li><a class="col1" data-areaId="5" ><span class="">测试5</span></a></li> <li><a class="col1" data-areaId="6" ><span class="">测试6</span></a></li> </ul> </div>
css部分:
*{margin:0; padding: 0;} .clx-3{ width: 100%;} .clx-3 li{ float: left; list-style: none; width: 33.333%; line-height: 50px; text-align: center; border-bottom: #ddd 1px solid; border-right: #ddd 1px solid; box-sizing: border-box} .clx-3 li:nth-child(3n+0){ border-right: none}
js部分:
$(document).on(‘click‘, ‘#searchCityListB li‘, function (event) { var areaIdS = $(this).children().attr("data-areaid"); var cityNameS = $(this).children().text(); setHistoryK(cityNameS, areaIdS); }); //设置cookies function setHistoryK(cityNameS, areaIdS) { var len = 0; var canAdd = true; var historyData, json1; var firstStr = " [" + " {\"cityName\":\"" + cityNameS + "\"," + " \"areaId\":" + areaIdS + "}" + " ]"; var jsonFirstStr = JSON.stringify(firstStr); if (!getCookie("cityHistory")) { //第一次的时候需要初始化 setCookie("cityHistory", jsonFirstStr); } else { //已经存在 historyData = http://www.mamicode.com/getCookie("cityHistory"); json1 = eval("(" + historyData + ")"); if (typeof(json1) == "string") { json1 = JSON.parse(json1); } len = json1.length; $(json1).each(function () { if (this.cityName == cityNameS) { canAdd = false; return false; } }); if (canAdd == true) { if (len > 2) { json1.splice(0, 1); } var newJsonStr = {"cityName": cityNameS, "areaId": areaIdS},jsonSetStr; json1.push(newJsonStr); //添加一个新的记录 jsonSetStr = JSON.stringify(json1); setCookie("cityHistory", jsonSetStr); console.log(jsonSetStr); } } }
引用一个cookie.js
具体代码如下:
//写cookies function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); } //获取cookies function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return unescape(arr[2]); else return null; } //检查cookies function checkCookie(c_name){ if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "=") if (c_start>0) var arr = new Array(); arr = document.cookie.split(";"); return arr.length } } //删除cookies function delCookie(name) { var keys=document.cookie.match(/[^ =;]+(?=\=)/g); if (keys) { for (var i = keys.length; i--;) document.cookie=keys[i]+‘=0;expires=‘ + new Date( 0).toUTCString() } }
使用cookie记录点击/浏览历史并以json格式存入
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。