数组字符串循环的项目中利用

最近在项目中遇到一个需求：一个弹层里有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的设置获取，取出字符串中出现次数最多的字符串，删除属性，迭代循环；