🎯 课程目标
完成本课程后，你将能够：
- 理解浏览器存储方案的区别和适用场景
- 熟练使用localStorage进行数据持久化
- 掌握sessionStorage的用法
- 理解数据序列化和反序列化
- 能够设计合理的数据存储策略
📖 浏览器存储概述
现代浏览器提供了多种客户端存储方案，每种方案都有其特点和适用场景。
✨ 浏览器存储方案对比
- localStorage：持久化存储，关闭浏览器后仍保留，容量约5MB
- sessionStorage：会话存储，关闭标签页后清除，容量约5MB
- Cookie：随请求发送，容量小（约4KB），有过期时间
- IndexedDB：大型结构化数据存储，容量大（数百MB）
- Cache API：专门用于缓存请求响应
💾 localStorage基础
localStorage是浏览器提供的键值对存储方案，数据持久化且跨会话保留。
基本操作
// 检查是否支持localStorage
if (typeof Storage !== 'undefined') {
console.log('支持localStorage');
} else {
console.log('不支持localStorage');
}
// 存储数据（只能存储字符串）
localStorage.setItem('username', '张三');
localStorage.setItem('age', '25');
localStorage.setItem('isVIP', 'true');
// 获取数据
const username = localStorage.getItem('username');
console.log(username); // '张三'
// 删除数据
localStorage.removeItem('age');
// 清空所有数据
localStorage.clear();
存储对象和数组
const user = {
name: '张三',
age: 25,
skills: ['JavaScript', 'Python'],
isVIP: true
};
// 使用JSON序列化存储对象
localStorage.setItem('user', JSON.stringify(user));
// 获取并解析
const savedUser = localStorage.getItem('user');
if (savedUser) {
const user = JSON.parse(savedUser);
console.log(user.name); // '张三'
console.log(user.skills); // ['JavaScript', 'Python']
}
// 数组的存储和读取
const colors = ['red', 'green', 'blue'];
localStorage.setItem('colors', JSON.stringify(colors));
const savedColors = JSON.parse(localStorage.getItem('colors'));
console.log(savedColors[0]); // 'red'
📦 实用存储函数封装
封装通用的存储函数，简化日常开发。
// 存储封装
const Storage = {
// 存储
set(key, value) {
try {
const serialized = JSON.stringify(value);
localStorage.setItem(key, serialized);
return true;
} catch (e) {
console.error('存储失败:', e);
return false;
}
},
// 获取
get(key, defaultValue = null) {
try {
const item = localStorage.getItem(key);
if (item === null) return defaultValue;
return JSON.parse(item);
} catch (e) {
console.error('读取失败:', e);
return defaultValue;
}
},
// 删除
remove(key) {
localStorage.removeItem(key);
},
// 清空
clear() {
localStorage.clear();
},
// 获取所有键
keys() {
const keys = [];
for (let i = 0; i < localStorage.length; i++) {
keys.push(localStorage.key(i));
}
return keys;
},
// 检查是否存在
has(key) {
return localStorage.getItem(key) !== null;
},
// 设置过期时间（单位：毫秒）
setWithExpiry(key, value, ttl) {
const item = {
value,
expiry: Date.now() + ttl
};
this.set(key, item);
},
// 获取带过期时间的数据
getWithExpiry(key) {
const itemStr = localStorage.getItem(key);
if (!itemStr) return null;
try {
const item = JSON.parse(itemStr);
if (Date.now() > item.expiry) {
this.remove(key);
return null;
}
return item.value;
} catch (e) {
return null;
}
}
};
// 使用示例
Storage.set('user', { name: '张三', age: 25 });
const user = Storage.get('user');
console.log(user.name);
// 设置7天过期的数据
Storage.setWithExpiry('token', 'abc123', 7 * 24 * 60 * 60 * 1000);