在开发 React 单页应用（SPA）时，我们经常需要实现记住密码功能，以便用户下次登录时可以自动填充密码。本文将介绍如何使用 localStorage 实现这一功能。
localStorage 简介
localStorage 是 HTML5 标准中新增的一种客户端存储方式，可以在浏览器中保存键值对数据，并且不受浏览器关闭或页面刷新的影响。localStorage 的优点是简单易用，可以在浏览器中存储大量的数据。
实现步骤
我们需要在登录页面的表单中添加一个“记住密码”的选项，当用户勾选该选项时，将用户名和密码保存到 localStorage 中；下次用户打开登录页面时，如果 localStorage 中存在保存的用户名和密码，就自动填充到表单中。
1. 添加“记住密码”选项
我们可以在登录表单中添加一个复选框，用于表示用户是否要记住密码：
<input type="checkbox" name="remember" id="remember" /> <label htmlFor="remember">记住密码</label>
2. 保存用户名和密码
当用户提交表单时，我们可以使用 localStorage.setItem 方法将用户名和密码保存到 localStorage 中：
-- -------------------- ---- -------
----- ----------- - --- -- -
-------------------
----- -------- - ---------------------------------
----- -------- - ---------------------------------
----- -------- - -----------------------------------
-- ---------- -
-------------------------------- ----------
-------------------------------- ----------
-
-- ------
--3. 自动填充用户名和密码
当用户打开登录页面时，我们可以使用 localStorage.getItem 方法获取保存的用户名和密码，并将它们填充到表单中：
-- -------------------- ---- -------
----- --------- - -- -- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
------------ -- -
----- ------------- - ---------------------------------
----- ------------- - ---------------------------------
-- -------------- -- -------------- -
---------------------------
---------------------------
-
-- ----
----- ----------- - --- -- -
-- ---
--
------ -
----- -----------------------
-----
------ -------------------------------
------ ----------- --------------- ------------- ---------------- ------------- -- ---------------------------- --
------
-----
------ ------------------------------
------ --------------- --------------- ------------- ---------------- ------------- -- ---------------------------- --
------
-----
------ --------------- --------------- ------------- --
------ -------------------------------
------
------- -------------------------
-------
--
--总结
使用 localStorage 实现记住密码功能非常简单，只需要在登录时保存用户名和密码，在下次打开登录页面时自动填充即可。但是需要注意的是，localStorage 中保存的数据是明文的，因此不要在其中存储敏感信息，例如密码明文或 token 等。如果需要存储敏感信息，应该使用加密或哈希等安全措施。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513c7ef95b1f8cacdc374ad