阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 08月15日

一個真正有用的小 UX 修復

當我開發軟體時，我會嘗試讓應用程式記住一些事情。這樣使用者就不必一遍又一遍地重複同樣的事情。

大多數應用程式在刷新或稍後返回時會重置所有內容。這很快就會讓人煩躁起來。

我的意思是：

您再次點選同一標籤
您重新選擇篩選器或排序
您重新輸入相同的輸入或提示
你每次都會切換黑暗模式
你一次又一次地展開同一個面板

雖然是小事，但積少成多，會讓你的應用程式感覺更糟。

使用`localStorage`來記住事情

我現在在localStorage中保存了一些小的狀態資訊。這樣應用就感覺更穩定、更一致了。

以下是我通常會儲存的內容：

上次開啟的標籤頁
暗模式或亮模式
草稿輸入或提示
過濾器或排序設置
折疊/展開的側邊欄
取消模式或彈出視窗（通常需要立即採取行動）
最近使用的顏色
預覽模式（行動裝置/桌面）
已選擇語言

沒有什麼太深奧或太嚴肅的事情，只是幫助人們繼續他們離開的事情。

範例：儲存和載入暗黑模式

以下是使用 localStorage 儲存暗模式設定的基本範例：

// Save mode
localStorage.setItem('theme', 'dark'); 

// Load mode
const savedTheme = localStorage.getItem('theme'); 
if (savedTheme === 'dark') {
    document.body.classList.add('dark');
}

或在 React 中：

useEffect(() => {
    const saved = localStorage.getItem('theme');
    if (saved) {
        setTheme(saved);
        // assume setTheme updates UI
    }
}, []);

const toggleTheme = () => {
    const newTheme = theme === 'dark' ? 'light' : 'dark';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
};