Pinia持久化存储揭秘：本地存储 vs 会话存储

正小安

于 2024-09-01 10:07:35 发布

阅读量356

点赞数 21

分类专栏： vue杂谈文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/everfoot/article/details/141780251

版权

5 篇文章 0 订阅

订阅专栏

引言：众所周知，pinia持久化插件pinia-plugin-persistedstate可以使pinia存储数据持久化（这是一句废话）。所以我就产生了疑问：持久化存储在哪？答案是本地存储。为什么不用会话存储呢？

借此机会复习一下本地存储的使用（原生html）,再和会话存储对比得出之前问题的答案。

本地存储是浏览器提供的一种API，允许你在用户的本地浏览器中存储键值对。这些数据在用户关闭浏览器后仍然存在，直到用户手动删除或超过存储期限。本地存储的最大容量通常为5MB，并且数据是持久存储的，不会在会话结束后丢失。

创建存储对象：
要使用本地存储，首先需要获取本地存储对象。
```
const storage = window.localStorage;
```
设置键值对：
使用 setItem 方法来设置键值对。
```
storage.setItem('key', 'value');
```
获取键值对：
使用 getItem 方法来获取键对应的值。
```
const value = storage.getItem('key');
```
删除键值对：
使用 removeItem 方法来删除一个键值对。
```
storage.removeItem('key');
```
清除所有键值对：
使用 clear 方法来清除所有键值对。
```
storage.clear();
```

事件监听：
使用 addEventListener 方法来监听存储事件。

storage.addEventListener('storage', function(event) {
  // 处理存储事件
});

使用本地存储时，需要注意以下几点：

在现代Web开发中，对于需要持久化用户状态的情况，通常更推荐使用本地存储而不是会话存储。以下是两者之间的对比：

持久性：
本地存储的数据在用户关闭浏览器后仍然存在，而会话存储的数据在用户关闭浏览器窗口或标签页时会自动删除。
共享性：
本地存储的数据可以在同一域名的所有窗口和标签页之间共享，而会话存储的数据只限于当前窗口或标签页。
存储大小：
本地存储的存储空间更大，通常为5MB，而会话存储的存储空间较小，具体取决于浏览器实现。
跨会话持久性：
本地存储允许用户在关闭浏览器并重新打开后仍然可以访问他们的数据，而会话存储则不具备这种跨会话持久性。
安全性：
本地存储的数据可以通过设置 HttpOnly 标志来提高安全性，而会话存储则没有这样的选项。
API支持：
本地存储的API提供了更多功能，如使用 localStorage.getItem 和 localStorage.setItem 进行更灵活的数据操作。

尽管本地存储具有这些优点，但在某些情况下，使用会话存储可能更合适。例如，当你需要存储只在当前会话中有效的数据，或者存储对安全性要求非常高且不需要跨会话持久性的数据时。

总之，选择使用本地存储还是会话存储取决于你的具体需求和应用场景。在大多数情况下，由于本地存储的持久性和共享性，它被视为更推荐的选择。

关注

专栏目录