React項目
實現(xiàn)方案:
1.在路由監(jiān)聽處獲取到當前頁面的URL杨何,以URL為key值,以訪問次數(shù)為value沥邻,生成一個對象危虱。
2.把生成的對象的經(jīng)過處理,用localStorge存儲到本地唐全。
3.進入頁面時埃跷,現(xiàn)獲取本地數(shù)據(jù)。
4.對本地數(shù)據(jù)進行處理邮利,獲取訪問次數(shù)最多的URL
5.顯示出URL
關鍵代碼
//獲取存儲的數(shù)據(jù)
const localStorageUrl = localStorage.getItem('urlCount');
// 循環(huán)找出被訪問次數(shù)做多的URL(找出最大value對應的key值)
var maxRouter = Object.keys(urlCount).reduce(function(p: any, n: any) {
if (urlCount[p] < urlCount[n]) {
return n;
}
return p;
});
// 存儲每個URL被訪問的次數(shù)
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));