首页 > 解决方案 > Web cookie 和本地存储有什么区别?

问题描述

在 react js 项目中,有多种存储数据的方法。

1. 使用 redux 状态管理和 redux persist 将数据永久存储在浏览器中。

2. 通过使用 setter 和 getters 使用 Web 浏览器的本地存储。

3. 使用网络 Cookie。

我想知道所有这些存储数据的方式和何时使用什么存储数据有什么区别?

标签: javascriptreactjscookiesreduxlocal-storage

解决方案


您的问题中有一些相当不准确的陈述。Re:1 - redux 不会在浏览器中永久保存数据。这实际上是 localStorage、cookie 和本地 DB 所做的。

但考虑到这一修正,这是一个很好的问题。

  1. redux 状态是最“反应性”的一种。其目的是让您的应用程序中的组件能够访问“单一事实来源”。它将数据直接存储在 JS 中,在内存中。它可以由您的组件快速访问和更新,无需任何介质(如本地存储),这就是它方便使用的原因。

  2. 本地存储确实能够在您的浏览器中永久存储数据。但是,从它读取和写入它需要额外的时间和负担以保持数据同步,因为您不能同步与它交互,它不是用作组件的主要数据源的最佳选择。但是最好在应用程序初始化时混合一些数据(例如,您可以将 JWT 令牌存储在那里,然后在应用程序加载时将其混合到 redux 存储中 - 这是一种常见的模式)

  3. Cookies 不是广义上存储信息的好地方。它是一个占位符,用于存储一些特定于会话的标识符,以便将它们传达给您的后端。查看这个以获取更多信息:https ://medium.com/datadriveninvestor/cookies-vs-local-storage-2f3732c7d977#:~:text=Differences%20between%20cookies%20and%20localStorage&text=Cookies%20are%20mainly%20for %20阅读,你%20more%20to%20work%20with


推荐阅读