最近网站根据需求要做本地存储常用网站访问的记录的功能;我的大致思路是点击的时候便存储到本地,然后进行数据的筛选,存放在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;
}
}
网友评论