如何在React项目中利用本地存储

以及为什么要这么做。

本地存储是现代Web浏览器固有的Web API。 它允许网站/应用程序在浏览器中存储数据（简单和有限），从而使数据在以后的浏览器会话中可用。

在开始学习本教程之前，可能还不清楚为什么您还要在React应用程序中使用Local Storage。

有很多原因和用例，超出了我的想象，但我发现了一些。

• 用于前端React项目的简单，伪造的后端-将后端/数据库的外观添加到前端项目组合项目通常很不错。 额外的功能将使您的应用程序更上一层楼，改善用户体验并打动潜在的雇主。
• 在开发过程中尝试不同的状态—在应用程序上工作时，使应用程序具有一定的state以能够进行特定的样式和功能通常是有用的或必要的（例如，对项目列表进行样式设置和删除项目需要项目 ） 。 而不是在每次刷新时重新创建一个应用程序的状态，本地存储可以坚持这种状态，使得开发更加高效，愉快。
• 跨会话保存表单数据-人们除了填写表单之外还讨厌什么？ 两次填写表格！

入门

使用create-react-app创建一个新的React项目。

npx create-react-app local-storage

cd进入新目录并启动应用程序。 如果尚未安装，请安装纱 。

yarn start

使用下面的代码更新您的App.js 在这里，我们正在设置一个简单的待办事项列表应用程序。 绝对没什么花哨的，但是它可以解决localStorage 。

复制此代码后，您应该可以将待办事项添加到列表中并将其删除。

开始将内容保存到localStorage

将我们的newItem输入的值保存到localStorage是小菜一碟。

在updateInput()方法中，我们将调用