本地存储完成了吗？还是React JS中的数据绑定？

Question

我是React和开发React应用程序的新手，我希望用户可以将自己选择的值保存在前端，以后也可以通过单击按钮查看这些值，并且用户可以查看已选择的值先前。现在的问题是如何提供此功能，我已经研究过可以通过本地存储还是通过react中的数据绑定概念来完成此功能，但是我不知道哪种方案最适合我的情况。

让我借助图表向您解释。

（带有指示器生成的第一张图像）这是我的React应用程序的主页，在“问题与指示器”部分下有一个名为“关联指示器”的东西，这些是用户在前端选择的值一侧。

（带有详细用户控件的第二张图像）这是定义所有用户控件的页面，用户可以在此处选择值，最后，当用户单击“关联”时，它将被关联，并且这些值具有如果显示在“相关指标”部分下，则该用户在单击任何相关指标时会在前端显示用户选择的所有值。

干杯。

Answer 1

在Web应用程序中保存数据与React或任何其他前端技术无关。

数据绑定是有关在某些数据更改时如何更新视图的概念，它与如何保存数据完全无关。但是与诸如反应和角度渲染等现代前端技术如何渲染您的组件有关。

您可以使用不同的方法将数据保存在Web应用程序中，每种方法都适合特定的用例-因此，您应该使用适合您的方法。

例如，您可以使用以下任何一种方式：

Cookies：在前端保存数据的旧方法，可以无限期保留，但是如果用户决定删除它们或从浏览器中清除数据，也可以将其删除。 Cookie随浏览器完成的每个请求一起发送到服务器端，但存在大小限制。

IndexedDB：这实际上就像浏览器中的数据库一样，在查询数据时确实非常快，并且与Cookie和LocalStorage相比，其大小限制也更大。但是，这是一个非常低级的API。除非您确实需要它的功能，否则不建议您使用它。也可以无限停留，也可以被用户删除。

LocalStorage：新的浏览器API可保留数据，比Cookies和IndexedDB更容易处理，可以无限期保留，但也可以由用户删除。具有比Cookie更大的大小限制，但小于IndexedDb。

SessionStorage：为每个标签保存的数据，并在页面会话结束时清除数据。

最后，如果您想要永久保留的数据并且用户无法删除，则必须在后端执行自己的解决方案。