在 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: 'zhangsan@example.com'
};
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
进行数据存储和检索。