首页tab存储到url里

src/pages/index/index.tsx

@@ -4,25 +4,24 @@ 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 {
+import { useNavigate, useLocation } from "react-router-dom";
-  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 navigate = useNavigate();
+  const result = new URLSearchParams(useLocation().search);
   const [loading, setLoading] = useState<boolean>(false);
-  const [tabKey, setTabKey] = useState(getTab());
+  const [tabKey, setTabKey] = useState(result.get("tab") || "0");
   const [coursesList, setCoursesList] = useState<any>([]);
   const [categories, setCategories] = useState<any>([]);
-  const [categoryId, setCategoryId] = useState<number>(Number(getCategory()));
+  const [categoryId, setCategoryId] = useState<number>(
-  const [categoryText, setCategoryText] = useState<string>(getCategoryName());
+    Number(result.get("cid") || 0)
+  );
+  const [categoryText, setCategoryText] = useState<string>(
+    String(result.get("catName") || "所有分类")
+  );
   const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
   const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
   const systemConfig = useSelector((state: any) => state.systemConfig.value);
@@ -167,6 +166,14 @@ const IndexPage = () => {
               onClick={() => {
                 setCategoryId(item.key);
                 setCategoryText(item.title);
+                navigate(
+                  "/?cid=" +
+                    item.key +
+                    "&catName=" +
+                    item.title +
+                    "&tab=" +
+                    tabKey
+                );
                 ref.current?.close();
               }}
             >
@@ -188,7 +195,9 @@ const IndexPage = () => {
           activeKey={tabKey}
           onChange={(key: any) => {
             setTabKey(key);
-            setTab(key);
+            navigate(
+              "/?cid=" + categoryId + "&catName=" + categoryText + "&tab=" + key
+            );
           }}
           style={{
             "--fixed-active-line-width": "20px",
@@ -219,9 +228,15 @@ const IndexPage = () => {
                     className={styles["category-tit"]}
                     onClick={() => {
                       setCategoryId(item.key);
-                      setCategory(item.key);
                       setCategoryText(item.title);
-                      setCategoryName(item.title);
+                      navigate(
+                        "/?cid=" +
+                          item.key +
+                          "&catName=" +
+                          item.title +
+                          "&tab=" +
+                          tabKey
+                      );
                       ref.current?.close();
                     }}
                   >

src/utils/index.ts

@@ -70,41 +70,6 @@ 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");
-}
-
 export function isMobile() {
   let flag = window.navigator.userAgent.match(
     /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i