在前端开发中，我们经常需要将应用程序状态保存在本地，以便用户可以在关闭浏览器后继续使用应用程序而不必从头开始。虽然可使用本地存储和 cookie 等技术实现这一目标，但许多框架和库提供了更方便的工具。
其中，hyperapp-persist-state 是一个用于 hyperapp 框架的 npm 包，能够自动将应用程序状态保存在本地，并在下次打开应用程序时恢复该状态。本文将介绍如何使用 hyperapp-persist-state。
安装
要使用 hyperapp-persist-state，首先需要安装它。可通过 npm 安装：
npm i hyperapp-persist-state
使用
以下是 hyperapp-persist-state 的使用流程。
- 导入并使用该包。
-- -------------------- ---- -------
------ - --- - ---- -----------
------ ------- ---- -------------------------
-- ------
----- ----- - ------- -------- -- -
-----
----------------------
------- ----------------------------------------
------
--
-- -- ---------------------- ----
----- -------------- - -----------------
-- ----
------------------- - --------------- -- ---------- 配置 hyperapp-persist-state 。
可选择为 hyperapp-persist-state 配置选项。可在调用包装函数时传递选项，如下所示：
// 使用 hyperapp-persist-state 包装应用，并传递选项
const persistedMyApp = persist({
key: "my-app",
version: 1,
include: ["title"]
})(MyApp);key是应用程序的键，用于存储应用程序状态的本地存储中。如果不传递此参数，则使用应用程序名称。version是存储的应用程序版本。应用程序状态格式更改时应该更新它。include是数组，其中包含应该在状态中包含的属性。
示例代码
以下是一个完整的示例，使用 hyperapp-persist-state 保存和恢复超级应用程序的状态。
-- -------------------- ---- -------
------ - --- - ---- -----------
------ ------- ---- -------------------------
-- ------
----- ----- - ------- -------- -- -
-----
----------------------
----------------------
------
-----------
------------------------
------------------------------
--
------
--
-- -------------
----- ------- - -
------------ ------- -------- ------ -- --
----------- ------------------
--
--
-- ----
----- ------------ - -
------ --- -----
-------- -----------
----------- --
--
-- -- ---------------------- ------
----- -------------- - -----------------
-- ------
------------------- - --------------- -- ---------运行以上代码时，可看到输入框的值已经被保存下来，刷新页面后再次使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566ac81e8991b448e2e86