Vue中的本地缓存方法详解_里放东西_4 清除所有数据想清空所有东西
Vue中的本地缓存方法详解
一、LocalStorage
LocalStorage就像一个永久保存的小盒子，可以在里面存放各种信息，比如用户设置啦、登录状态啦，只要不主动删，这些信息就会一直保留。1.1 设置数据
想往LocalStorage里放东西？简单，就像存钱一样，用`localStorage.setItem(key, value)`。
1.2 获取数据
想从LocalStorage里取东西？用`localStorage.getItem(key)`，就像取钱一样。
1.3 删除数据
想删掉某个键值对？用`localStorage.removeItem(key)`，就像取款时发现钱不见了。
1.4 清除所有数据
想清空所有东西？用`localStorage.clear()`，就像清空账户里的所有钱。
应用场景
LocalStorage最适合那些需要长期保存的信息，比如用户偏好、主题选择、登录状态等。二、SessionStorage
SessionStorage就像一个临时保存的小盒子，你放进去的东西，当会话结束（比如关闭浏览器标签页）时就会消失。2.1 设置数据
往SessionStorage里放东西，也是用`sessionStorage.setItem(key, value)`。
2.2 获取数据
从SessionStorage里取东西，用`sessionStorage.getItem(key)`。
2.3 删除数据
删除某个键值对，用`sessionStorage.removeItem(key)`。
2.4 清除所有数据
清空所有数据，用`sessionStorage.clear()`。
应用场景
SessionStorage适合存储临时数据，比如表单输入数据、单次访问的用户状态等。三、使用IndexedDB
IndexedDB是一个更高级的存储方式，可以存储大量的结构化数据，就像一个强大的数据库。3.1 打开数据库
你需要用`openDatabase()`方法打开数据库。
3.2 添加数据
添加数据，需要先创建一个事务，然后用事务的`add()`方法添加数据。
3.3 获取数据
获取数据，也是通过事务的查询方法，比如`get()`。
3.4 删除数据
删除数据，同样通过事务的删除方法。
应用场景
IndexedDB适合存储大量复杂数据，如离线数据、缓存API响应、存储图像和视频等。四、比较LocalStorage、SessionStorage和IndexedDB
下面是一个简单的表格，对比了这三种本地缓存方法的特性：| 特性 | LocalStorage | SessionStorage | IndexedDB |
|---|---|---|---|
| 存储大小 | 约5-10MB | 约5-10MB | 无明确限制 |
| 生命周期 | 永久 | 会话结束 | 永久 |
| 数据结构 | 键值对 | 键值对 | 复杂对象 |
| 异步支持 | 不支持 | 不支持 | 支持 |
| 安全性 | 低 | 低 | 高 |
| 应用场景 | 用户偏好、主题、登录状态 | 表单输入、临时状态 | 大量数据、离线数据缓存 |
五、实例说明
假设你在开发一个Vue应用，用户登录后需要存储用户信息。5.1 使用LocalStorage存储用户信息
登录后使用`localStorage.setItem('userInfo', JSON.stringify(user))`存储用户信息。
5.2 在Vue组件中使用
在Vue组件中，使用`created()`钩子函数，用`JSON.parse(localStorage.getItem('userInfo'))`获取用户信息，并初始化组件状态。