Работа с localStorage в TypeScript требует особого внимания, так как этот API браузера хранит только строки. Методы getItem возвращают string | null, а при сохранении объектов их нужно сериализовать.
Для удобной работы часто создают типизированные обертки (wrappers). Основные шаги:
- Получение строки по ключу.
- Проверка на
null. - Парсинг через
JSON.parse(). - Приведение результата к нужному дженерик-типу.
В этом практическом уроке мы напишем безопасную абстракцию для работы с хранилищем браузера.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Модуль 19: Utility Types — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
- Типизация событий DOM.
- Типизация fetch запросов.
- Типизация JSON данных.
- Типизация localStorage.
1. Чтение из хранилища
В этом задании вам нужно прочитать данные из localStorage. Заполните пропуски, чтобы получить значение по ключу 'username' из хранилища браузера. Используйте правильный метод localStorage и укажите ключ в кавычках.
// Чтение значения из localStorage по ключу
const username = localStorage.input1S(input2S);
console.log(`Имя пользователя: ${username}`);2. Парсинг JSON
В этом задании вам предстоит дополнить код, который получает строку из localStorage, проверяет её на null и парсит JSON. В коде есть два пропуска, которые нужно заполнить, выбрав подходящие варианты из выпадающего списка. Обратите внимание на правильную последовательность проверки и вызова JSON.parse.
const jsonString: string | null = localStorage.getItem('data');
if (input1S) {
const data = input2S;
console.log(data);
}3. Забытая сериализация
В этом фрагменте TypeScript-кода допущена ошибка при сохранении объекта в localStorage. Вместо сериализации объекта с помощью JSON.stringify, объект сохраняется напрямую, что приводит к некорректному значению '[object Object]'. Исправьте строку с ошибкой, чтобы объект корректно сохранялся в localStorage.
const user = { name: 'Alice', age: 25 };localStorage.setItem('user', user);const savedUser = localStorage.getItem('user');console.log(savedUser);4. Функция load
Из предложенных строк соберите корректную TypeScript-функцию `load`, которая является дженерик-функцией для загрузки данных из localStorage по ключу. Функция должна получать значение, проверять его на null, парсить JSON и возвращать данные с типом T или null при отсутствии. Игнорируйте лишние строки, которые не входят в решение.
function load<T>(key: string): T | null { const data = localStorage.getItem(key); if (data === null) { return null; } return JSON.parse(data) as T;} console.log(key); return data as T;5. Возврат при отсутствии ключа
Проанализируйте код типизированной обертки для работы с localStorage и определите, что вернет функция getItem, если указанный ключ отсутствует в хранилище и не передано значение по умолчанию. Обратите внимание на возвращаемый тип функции и логику обработки отсутствующего значения.
function getItem<T>(key: string, defaultValue?: T): T | null {
const item = localStorage.getItem(key);
if (item !== null) {
return JSON.parse(item) as T;
}
if (defaultValue !== undefined) {
return defaultValue;
}
return null;
}
// Ключ 'theme' отсутствует в localStorage
const result = getItem<string>('theme');
console.log(result);6. Методы Storage
В этом задании вам нужно сопоставить методы объекта localStorage с их описаниями. В левой колонке представлены сигнатуры методов TypeScript для работы с Web Storage, а в правой — их краткие описания. Сопоставьте каждый метод с соответствующим описанием, перетащив элементы правой колонки к левым. Обратите внимание, что в правой колонке нет лишних вариантов, но порядок описаний перемешан.
setItem(key: string, value: string): voidgetItem(key: string): string | nullremoveItem(key: string): voidclear(): voidkey(index: number): string | null7. Логика сохранения
Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как программа сохраняет типизированный объект в localStorage, включая валидацию, сериализацию, запись и обработку ошибок.
interface UserData {
id: number;
name: string;
email: string;
}
function saveToStorage(key: string, data: UserData): void {
try {
// Валидация
if (!data.id || !data.name || !data.email) {
throw new Error('Invalid data: missing required fields');
}
// Сериализация
const serialized = JSON.stringify(data);
// Запись
localStorage.setItem(key, serialized);
console.log('Data saved successfully');
} catch (error) {
console.error('Save failed:', error.message);
}
}
// Входные данные
const user: UserData = {
id: 1,
name: 'Alice',
email: 'alice@example.com'
};
saveToStorage('user', user);