2018-10-24 根据页面浏览次数,首页显示浏览次数最多的页面

React项目

实现方案:

1.在路由监听处获取到当前页面的URL,以URL为key值,以访问次数为value,生成一个对象。
2.把生成的对象的经过处理,用localStorge存储到本地。
3.进入页面时,现获取本地数据。
4.对本地数据进行处理,获取访问次数最多的URL
5.显示出URL

关键代码

//获取存储的数据
const localStorageUrl = localStorage.getItem('urlCount');
 // 循环找出被访问次数做多的URL(找出最大value对应的key值)
var maxRouter = Object.keys(urlCount).reduce(function(p: any, n: any) {
  if (urlCount[p] < urlCount[n]) {
   return n;
  }
  return p;
});
// 存储每个URL被访问的次数
const localStorageUrl = localStorage.getItem('urlCount');
let urlCount: any = localStorageUrl ? JSON.parse(localStorageUrl) : {};

if (Object.keys(urlCount).includes(location.pathname)) {
    assign(urlCount, {[location.pathname]: ++urlCount[location.pathname]});
 }else{
    assign(urlCount, {[location.pathname]: 0});
 }
localStorage.setItem('urlCount', JSON.stringify(urlCount));

你可能感兴趣的:(2018-10-24 根据页面浏览次数,首页显示浏览次数最多的页面)