Scenario: When the data interface needs to record the entry time, departure time, and total stay time of browsing articles, we record the start time when entering the page, record the departure time when leaving the page, and invoke the back-end interface when leaving the page.

Originally, it was simply called from the simple return function in useEffect, which can be successfully called when the normal process enters and clicks back. However, when the article is shared, click enter and there is no return key, there is only the home button in the upper left corner, and part of the data obtained from store or article details will be lost. Solution: Save the data locally when either sharing or self-entering

import { useStore, observer } from '@store';
import dayjs from 'dayjs';
import MD5 from 'js-md5';
import ajax from '@server';
const { CommonStore } = useStore();
const { appStartTime, initTime } = CommonStore;
const setParams = () = > {
let newInfo = storage.getLocalStorage('newInfo');
let newDetail = storage.getLocalStorage('newDetail');
if (newInfo && newDetail) {
  newInfo = JSON.parse(newInfo);
  newDetail = JSON.parse(newDetail);
  const { id, userId, headCompany, branchFirst, branchSecond, department } = newInfo;
  const { name, code } = newDetail;
  const traceId = userId + appStartTime.valueOf();
  const viewQuery: any = {
    headCompany: headCompany,
    investmentAdvisorId: id,
    branchFirst,
    branchSecond,
    department,
    enterTime: appStartTime,
    traceId: MD5(traceId.toString()).substring(8.24).toUpperCase(),
    productId: myparams[0].productName: name, / / product name
    productCode: code, // Product code
    title: name,
    productType: 2};return viewQuery;
}
return {};
};
// User product < browse > data saves browse data
 const postProduceRecord = () = > {
    const viewQuery = setParams();
    viewQuery.duration = dayjs().diff(appStartTime, 'second');
    viewQuery.leaveTime = dayjs();
    ajax.postProduceRecord(viewQuery).then((res) = >{}); };// Initialize the time when entering the page to obtain details
useEffect(() = >{ initTime(); getFinacialDetail(); } []);// Save the details locally when they are obtained
useEffect(() = > {
    if(detail? .name && adviserInfo.name) {const newInfo = JSON.stringify(adviserInfo);
        storage.setLocalStorage('newInfo', newInfo);

        const newDetail = JSON.stringify(detail);
        storage.setLocalStorage('newDetail', newDetail);
    }
}, [detail, adviserInfo]);
// Call the interface when you leave the page
useEffect(() = > {
return () = >{ postProductRecord(); }; } []);Copy the code
//common.ts
import { observable, action } from 'mobx';
import dayjs from 'dayjs';
class CommonStore {
    @observable appStartTime = dayjs();
    @action.bound
    initTime() {
        this.appStartTime = dayjs(); }}export default new CommonStore();
export interface ICommonStore extends CommonStore { }
Copy the code