最近在项目中遇到一个需求：一个弹层里有32个车牌首字（中文汉字）；用户点击哪一个并且提交并且成功数据交互后，这个汉字将存入cookie中，当用户下次打开这个弹层时，常用车牌首字将显示从cookie里取到的值，只显示排名靠前5的首汉字；经过我的折腾，折腾出来了，考虑到cookie存的小，我控制了保存的字符串长度；总结每个难点，成长自己；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>car</title> 6 </head> 7 <body> 8 <input type="text" id="ipt"><button id="btn">按钮</button> 9 <p id="p1"></p> 10 </body> 11 <script> 12 //设置Cookie 13 function setCookie(name,value,iDay){ 14 var oDate=new Date(); 15 oDate.setDate(oDate.getDate()+iDay); 16 document.cookie=name+'='+value+';expires='+oDate; 17 } 18 //获取Cookie 19 function getCookie(name){ 20 var arr=document.cookie.split('; '); 21 for(var i=0;i<arr.length;i++){ 22 var arr2=arr[i].split('='); 23 if(arr2[0]==name){ 24 return arr2[1]; 25 } 26 } 27 return ''; 28 } 29 //删除Cookie 30 function deleteCookie(name){ 31 setCookie(name,1,-1); 32 } 33 //存 34 function saveToCookie(str){ 35 var clickStr=str; 36 if(getCookie('carCommon')==''){//不存在这个cookie字段 就加个 37 setCookie('carCommon',clickStr); 38 }else{ 39 var oldCookie=getCookie('carCommon'); 40 if(oldCookie.length>200){//如果cookie存取的长度超过200 超过200的值截取前200个字段即可 41 setCookie('carCommon',oldCookie.slice(0,200)); 42 }else{ 43 setCookie('carCommon',oldCookie+clickStr); 44 } 45 46 } 47 } 48 //取 49 function getData(str){ 50 var head=[]; 51 var obj=[]; 52 for(var i=0;i<str.length;i++){ 53 var key=str[i]; 54 if(!obj[key]){ 55 obj[key]=1 56 }else{ 57 obj[key]++ 58 } 59 } 60 Max(obj); 61 function Max(objJosn){ 62 var max=0; 63 var newStr=''; 64 for(var key in objJosn){ 65 if(objJosn[key]>max){ 66 max=objJosn[key]; 67 newStr=key; 68 } 69 } 70 if(newStr==''){ 71 head=head; 72 return false; 73 } 74 head.push(newStr); 75 delete objJosn[newStr]; 76 Max(objJosn); 77 } 78 var arr1=[]; 79 for(var i=0;i<head.length;i++){ 80 if(head.length<=5){ 81 82 arr1.push(head[i]); 83 }else{ 84 if(i===5){ 85 break; 86 }else{ 87 arr1.push(head[i]); 88 } 89 } 90 } 91 return arr1; 92 } 93 94 var ipt=document.querySelector('#ipt'); 95 document.querySelector('#btn').onclick=function(){ 96 saveToCookie(ipt.value); 97 document.querySelector('#p1').innerHTML=getCookie('carCommon'); 98 console.log(getData(getCookie('carCommon'))) 99 } 100 </script> 101 </html>
用到的技术要点：cookie的设置获取，取出字符串中出现次数最多的字符串，删除属性，迭代循环；