首页缓存

src/components/index.ts

@@ -1,3 +1,4 @@
 export * from "./empty";
 export * from "./footer";
 export * from "./bar-footer";
+export * from "./keep-alive";

src/components/keep-alive/index.tsx

@@ -0,0 +1,29 @@
+import { useUpdate } from "ahooks";
+import { useEffect, useRef } from "react";
+import { useLocation, useOutlet } from "react-router-dom";
+
+function KeepAlive() {
+  const componentList = useRef(new Map());
+  const outLet = useOutlet();
+  const { pathname } = useLocation();
+  const forceUpdate = useUpdate();
+
+  useEffect(() => {
+    if (!componentList.current.has(pathname)) {
+      componentList.current.set(pathname, outLet);
+    }
+    forceUpdate();
+  }, [pathname]);
+
+  return (
+    <div>
+      {Array.from(componentList.current).map(([key, component]) => (
+        <div key={key} style={{ display: pathname === key ? "block" : "none" }}>
+          {component}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default KeepAlive;

src/pages/index/index.tsx

@@ -4,17 +4,25 @@ import { DropdownRef } from "antd-mobile/es/components/dropdown";
 import { user } from "../../api/index";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
+import {
+  setTab,
+  getTab,
+  getCategory,
+  setCategory,
+  setCategoryName,
+  getCategoryName,
+} from "../../utils/index";
 import { Footer, TabBarFooter, Empty } from "../../components";
 import { CoursesModel } from "./compenents/courses-model";
 
 const IndexPage = () => {
   const ref = useRef<DropdownRef>(null);
   const [loading, setLoading] = useState<boolean>(false);
-  const [tabKey, setTabKey] = useState("0");
+  const [tabKey, setTabKey] = useState(getTab());
   const [coursesList, setCoursesList] = useState<any>([]);
   const [categories, setCategories] = useState<any>([]);
-  const [categoryId, setCategoryId] = useState<number>(0);
-  const [categoryText, setCategoryText] = useState<string>("所有分类");
+  const [categoryId, setCategoryId] = useState<number>(Number(getCategory()));
+  const [categoryText, setCategoryText] = useState<string>(getCategoryName());
   const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
   const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
   const systemConfig = useSelector((state: any) => state.systemConfig.value);
@@ -180,6 +188,7 @@ const IndexPage = () => {
           activeKey={tabKey}
           onChange={(key: any) => {
             setTabKey(key);
+            setTab(key);
           }}
           style={{
             "--fixed-active-line-width": "20px",
@@ -210,7 +219,9 @@ const IndexPage = () => {
                     className={styles["category-tit"]}
                     onClick={() => {
                       setCategoryId(item.key);
+                      setCategory(item.key);
                       setCategoryText(item.title);
+                      setCategoryName(item.title);
                       ref.current?.close();
                     }}
                   >

src/utils/index.ts

@@ -69,3 +69,38 @@ export function durationFormat(dateStr: number) {
 
   return hour + minute + second;
 }
+
+export function getTab() {
+  return window.localStorage.getItem("playedu-h5-tabKey") || "0";
+}
+
+export function setTab(token: string) {
+  window.localStorage.setItem("playedu-h5-tabKey", token);
+}
+
+export function clearTab() {
+  window.localStorage.removeItem("playedu-h5-tabKey");
+}
+
+export function getCategory() {
+  return window.localStorage.getItem("playedu-h5-category") || 0;
+}
+
+export function setCategory(token: string) {
+  window.localStorage.setItem("playedu-h5-category", token);
+}
+
+export function clearCategory() {
+  window.localStorage.removeItem("playedu-h5-category");
+}
+export function getCategoryName(): string {
+  return window.localStorage.getItem("playedu-h5-categoryName") || "所有分类";
+}
+
+export function setCategoryName(token: string) {
+  window.localStorage.setItem("playedu-h5-categoryName", token);
+}
+
+export function clearCategoryName() {
+  window.localStorage.removeItem("playedu-h5-categoryName");
+}