在 TypeScript 中使用 localStorage 与在 JavaScript 中使用类似，但你可以利用 TypeScript 的类型系统来增强代码的健壮性和可读性。以下是一些常见的 localStorage 操作及其在 TypeScript 中的用法。
基本操作
1. 设置数据
function setItem<T>(key: string, value: T): void {
localStorage.setItem(key, JSON.stringify(value));
}
2. 获取数据
function getItem<T>(key: string): T | null {
const value = localStorage.getItem(key);
return value ? JSON.parse(value) : null;
}
3. 删除数据
function removeItem(key: string): void {
localStorage.removeItem(key);
}
4. 清空所有数据
function clearStorage(): void {
localStorage.clear();
}
示例
假设我们有一个简单的应用，需要存储和获取用户信息。
定义用户类型
interface User {
id: number;
name: string;
email: string;
}
设置用户信息
const user: User = {
id: 1,
name: '张三',
email: '[email protected]'
};
setItem<User>('user', user);
获取用户信息
const storedUser: User | null = getItem<User>('user');
if (storedUser) {
console.log('用户信息:', storedUser);
} else {
console.log('没有找到用户信息');
}
删除用户信息
removeItem('user');
console.log('用户信息已删除');
清空所有存储的数据
clearStorage();
console.log('所有本地存储数据已清空');
注意事项
- JSON 序列化：
localStorage 只能存储字符串，因此通常需要将对象转换为 JSON 字符串进行存储，并在读取时将其解析回对象。 - 类型安全：通过使用泛型
<T>，可以在编译时检查类型，确保你存储和获取的数据类型一致。 - 错误处理：在实际应用中，建议添加错误处理机制，例如捕获
JSON.parse 可能抛出的异常。 - 浏览器兼容性：
localStorage 在现代浏览器中广泛支持，但在某些旧版或无痕模式下可能不可用。可以使用 try...catch 来处理这种情况。
错误处理示例
function getItem<T>(key: string): T | null {
try {
const value = localStorage.getItem(key);
return value ? JSON.parse(value) : null;
} catch (error) {
console.error('Error parsing local storage item:', error);
return null;
}
}
通过这些方法，你可以在 TypeScript 中更安全、更方便地使用 localStorage 进行数据存储和检索。