Use cookies to record clicks/browsing history and deposit in JSON format

I haven't written a blog for a long time. Write a small demo today.

Use cookies to record the history of each click, and to store cookies in JSON format, if the same browsing history is not recorded

Only the latest 3 data is set in the Demo.

if (len > 2) {                    json1.splice (0, 1);}

More can modify 2 in the Code BELOW.

The specific code is as Follows:

HTML section:

<Divclass= "clx-3">    <ulID= "searchcitylistb">        <Li><aclass= "col1"Data-areaid= "1" >Test 1</a></Li>        <Li><aclass= "col1"Data-areaid= "2" ><spanclass="">Test 2</span></a></Li>        <Li><aclass= "col1"Data-areaid= "3" ><spanclass="">Test 3</span></a></Li>        <Li><aclass= "col1"Data-areaid= "4" ><spanclass="">Test 4</span></a></Li>        <Li><aclass= "col1"Data-areaid= "5" ><spanclass="">Test 5</span></a></Li>        <Li><aclass= "col1"Data-areaid= "6" ><spanclass="">Test 6</span></a></Li>    </ul></Div>

CSS Section:

*{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 Section:

$ (document). on (' Click ', ' #searchCityListB li ',function(event) {varAreaids = $ ( this). Children (). attr ("data-areaid"); varCitynames = $ ( this). Children (). text ();    Sethistoryk (citynames, areaids);    }); //Set Cookies    functionSethistoryk (citynames, Areaids) {varLen = 0; varCanadd =true; varhistorydata, json1; varFirststr = "[" + "{\" cityname\ ": \" "+ citynames +" \ "," + "\" areaid\ ":" + areaids + "}" + " ]"; varJsonfirststr =json.stringify (firststr); if(!getcookie ("cityhistory")) {//The first time you need to initializeSetcookie ("cityhistory", jsonfirststr); } Else{//already existsHistorydata = 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); }                varNewjsonstr = {"cityname": citynames, "areaid": areaids},jsonsetstr; Json1.push (newjsonstr); //add a new recordJsonsetstr =json.stringify (json1); Setcookie ("cityhistory", jsonsetstr);            Console.log (jsonsetstr); }        }    }

Referencing a cookie.js

The specific code is as Follows:

//Write CookiesfunctionSetcookie (name,value) {varDays = 30; varExp =NewDate (); Exp.settime (exp.gettime ()+ days*24*60*60*1000); Document.cookie= name + "=" + escape (value) + "; expires=" +exp.togmtstring ();}//Access to CookiesfunctionGetCookie (name) {vararr,reg=NewREGEXP ("(^|)" +name+ "= ([^;] *)(;|$)"); if(arr=Document.cookie.match (reg))returnUnescape (arr[2]); Else        return NULL;}//Check CookiesfunctionCheckcookie (c_name) {if(document.cookie.length>0) {c_start=document.cookie.indexof (c_name + "=")      if(c_start>0)        vararr =NewArray (); Arr= Document.cookie.split (";"); returnarr.length}}//Delete CookiesfunctionDelcookie (name) {varKeys=document.cookie.match (/[^ =;] +(?=\=)/g); if(keys) { for(vari = keys.length; i--;) Document.cookie=keys[i]+ ' =0;expires= ' +NewDate (0). toutcstring ()}}

Use cookies to record clicks/browsing history and deposit in JSON format