saving and loading order and orderBy to and from session storage

src/pages/Devices.tsx

@@ -92,8 +92,30 @@ export default function Devices() {
   const [devicesLoading, setDevicesLoading] = useState(false)
   const [limit, setLimit] = useState(10);
   const [page, setPage] = useState(0);
-  const [order, setOrder] = useState<"asc" | "desc">("asc");
-  const [orderBy, setOrderBy] = useState("name");
+
+  const [order, setOrder] = useState<"asc" | "desc">(() => {
+    // Load from sessionStorage on initial render
+    const savedOrder = sessionStorage.getItem('order');
+    return (savedOrder === "asc" || savedOrder === "desc") ? savedOrder : "asc";
+  });
+
+  // Save to sessionStorage whenever order changes
+  useEffect(() => {
+    sessionStorage.setItem('order', order);
+  }, [order]);
+
+  const [orderBy, setOrderBy] = useState(() => {
+    // Load from sessionStorage on initial render
+    const savedOrder = sessionStorage.getItem('orderBy');
+    return (savedOrder && savedOrder?.length > 0) ? savedOrder : "name";
+  });
+
+  // Save to sessionStorage whenever order changes
+  useEffect(() => {
+    sessionStorage.setItem('orderBy', orderBy);
+  }, [orderBy]);
+
+  // const [orderBy, setOrderBy] = useState("name");
   const [search, setSearch] = useState("");
   const [total, setTotal] = useState(0);
   const [devices, setDevices] = useState<Device[]>([])