美文网首页前端开发那些事儿
vue实现本地常用网站存储,并排序筛选top10

vue实现本地常用网站存储,并排序筛选top10

作者: 陶菇凉 | 来源:发表于2020-12-10 14:31 被阅读0次

    最近网站根据需求要做本地存储常用网站访问的记录的功能;我的大致思路是点击的时候便存储到本地,然后进行数据的筛选,存放在store全局里面,实时改变常用网站的列表的排序。
    首先在store里面定义web存储数组的字段;


    image.png

    然后再你需要获取的数据的页面进行获取数据和监听数据改变,进而进行赋值


    image.png
    然后就是我点击访问网站进行的一系列操作
    setWebs(item){
    //item是当前点击的网站的那条完整数据
        //存储常用网站
          //先获取本地存储的网站
          var web=[];
          if(JSON.parse(window.localStorage.getItem("web"))){
            web=JSON.parse(window.localStorage.getItem("web"));
          }
          this.visits++;
          //先判断是否存储过,如果存在不再存在,web是空数组
          if(web.length==0){
            web.push({
                            id:item.id,
                    name:item.name,
                    logo:item.logo,
                    type:item.type,
                    visits:this.visits
                    })
          }else{
                //当前已经存在  //index==-1 不存在,等于其他代表当前的index值
                let index = web.findIndex((row) => {
                        return item.id === row.id
                    })
                //web.some(ele => ele.id==item.id) 当前点击的元素在数组中是否存在
                    if(web.some(ele => ele.id==item.id)){
                        web[index].visits+=1;
                    }else{
                        web.push({
                                    id:item.id,
                            name:item.name,
                            logo:item.logo,
                            type:item.type,
                            visits:this.visits
                                })
                    }
          }
          //对存储到本地的网站,根据访问量进行筛选排序,调用下面的方法
          web.sort(this.sortBy('visits',false));
          //只存前10个
    //    var arr=web.splice(0,10);
                //存储全部的网站,获取的时候只拿前10个
          var arr=web;
                //然后再次存储到本地
                window.localStorage.setItem("web", JSON.stringify(arr));
                var data={};
                data['常用网站']=JSON.parse(JSON.stringify(arr));
                //修改全局的值,时时改变列表数据
                this.$store.dispatch('global/changeWeb',data);
       },
       /**数组根据数组对象中的某个属性值进行排序的方法 
         * 使用例子:newArray.sort(sortBy('number',false)) //表示根据number属性降序排列;若第二个参数不传递,默认表示升序排序
         * @param attr 排序的属性 如number属性
         * @param rev true表示升序排列,false降序排序
         * */
        sortBy(attr,rev){
            //第二个参数没有传递 默认升序排列
            if(rev ==  undefined){
                rev = 1;
            }else{
                rev = (rev) ? 1 : -1;
            }
            
            return function(a,b){
                a = a[attr];
                b = b[attr];
                if(a < b){
                    return rev * -1;
                }
                if(a > b){
                    return rev * 1;
                }
                return 0;
            }
        }
    

    相关文章

      网友评论

        本文标题:vue实现本地常用网站存储,并排序筛选top10

        本文链接:https://www.haomeiwen.com/subject/irlnwktx.html