fix: proper localstorage usage

app/components/mask.tsx

@@ -48,7 +48,7 @@ import { Updater } from "../typing";
 import { ModelConfigList } from "./model-config";
 import { FileName, Path } from "../constant";
 import { BUILTIN_MASK_STORE } from "../masks";
-import { nanoid } from "nanoid";
+import { useLocalStorage } from "foxact/use-local-storage";
 import {
   DragDropContext,
   Droppable,
@@ -426,16 +426,11 @@ export function MaskPage() {
   const maskStore = useMaskStore();
   const chatStore = useChatStore();
 
-  const [filterLang, setFilterLang] = useState<Lang | undefined>(
-    () => localStorage.getItem("Mask-language") as Lang | undefined,
+  const [filterLang, setFilterLang] = useLocalStorage<Lang | null>(
+    "Mask-language",
+    null,
+    { raw: true },
   );
-  useEffect(() => {
-    if (filterLang) {
-      localStorage.setItem("Mask-language", filterLang);
-    } else {
-      localStorage.removeItem("Mask-language");
-    }
-  }, [filterLang]);
 
   const allMasks = maskStore
     .getAll()
@@ -542,7 +537,7 @@ export function MaskPage() {
               onChange={(e) => {
                 const value = e.currentTarget.value;
                 if (value === Locale.Settings.Lang.All) {
-                  setFilterLang(undefined);
+                  setFilterLang(null);
                 } else {
                   setFilterLang(value as Lang);
                 }

app/locales/index.ts

@@ -82,6 +82,9 @@ merge(fallbackLang, targetLang);
 export default fallbackLang as LocaleType;
 
 function getItem(key: string) {
+  if (typeof window === "undefined") {
+    return null;
+  }
   try {
     return localStorage.getItem(key);
   } catch {
@@ -90,6 +93,9 @@ function getItem(key: string) {
 }
 
 function setItem(key: string, value: string) {
+  if (typeof window === "undefined") {
+    return null;
+  }
   try {
     localStorage.setItem(key, value);
   } catch {}

app/utils/indexedDB-storage.ts

@@ -3,6 +3,9 @@ import { get, set, del, clear } from "idb-keyval";
 
 class IndexedDBStorage implements StateStorage {
   public async getItem(name: string): Promise<string | null> {
+    if (typeof window === "undefined") {
+      return null;
+    }
     try {
       const value = (await get(name)) || localStorage.getItem(name);
       return value;
@@ -12,6 +15,9 @@ class IndexedDBStorage implements StateStorage {
   }
 
   public async setItem(name: string, value: string): Promise<void> {
+    if (typeof window === "undefined") {
+      return;
+    }
     try {
       const _value = JSON.parse(value);
       if (!_value?.state?._hasHydrated) {
@@ -25,6 +31,9 @@ class IndexedDBStorage implements StateStorage {
   }
 
   public async removeItem(name: string): Promise<void> {
+    if (typeof window === "undefined") {
+      return;
+    }
     try {
       await del(name);
     } catch (error) {
@@ -33,6 +42,9 @@ class IndexedDBStorage implements StateStorage {
   }
 
   public async clear(): Promise<void> {
+    if (typeof window === "undefined") {
+      return;
+    }
     try {
       await clear();
     } catch (error) {