Крошечный 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);
};

Быстрые советы

• Храните только вещи, которые облегчают приложение в использовании
• Не сохраняйте конфиденциальную информацию (например, токены Auth или личные данные)
• Дайте пользователям возможность сбросить предпочтения, если это необходимо
• Используйте небольшую обертку или пользовательский крюк, если вы используете это много

Вот и все

Это не большая особенность. Но это заставляет ваше приложение чувствовать себя более гладким. Люди не замечают этого, когда это работает - они просто перестают раздражаться.

Если вы создаете то, что люди будут использовать более одного раза, это важно.

Что еще вы экономите с LocalStorage, который улучшает UX? Отбросьте свои собственные шаблоны ниже. Мне всегда любопытно, что делают другие.