在前端开发中，常常需要用户输入账号密码进行登录。为了方便用户再次登录，我们可以使用 Cookie 来记录用户的账号密码信息，实现自动登录的功能。
什么是 Cookie？
Cookie 是一种浏览器存储数据的技术。当用户访问网站时，服务器可以向用户的浏览器发送一个包含数据的 Cookie，浏览器将该 Cookie 存储起来。每次用户再次访问该网站时，浏览器会将保存的 Cookie 发送给服务器，服务器就可以读取其中的数据。
如何使用 Cookie 记录账号密码？
我们可以在用户登录时使用 JavaScript 设置 Cookie，将用户输入的账号密码信息保存到 Cookie 中。代码示例如下：
-- -------------------- ---- -------
-------- --------------- ------ ----- -
--- ------- - ---
-- ------ -
--- ---- - --- -------
--------------------------- - ----- - -- - -- - -- - -------
------- - -- --------- - -------------------
-
--------------- - ---- - --- - ------ -- --- - ------- - -- --------
-
-------- ------- -
--- -------- - ------------------------------------------
--- -------- - ------------------------------------------
--------------------- --------- ----
--------------------- --------- ----
-上述代码中，setCookie() 函数用于设置 Cookie，在其中指定了 Cookie 的名称、值和过期时间（以天为单位）。login() 函数用于获取用户输入的账号密码信息，并将其保存到 Cookie 中。在这里，我们设置 Cookie 的过期时间为 30 天，即在 30 天内用户再次访问该网站时，浏览器会自动发送保存的 Cookie 数据给服务器。
如何使用 Cookie 实现记住账号密码功能？
当用户再次访问该网站时，我们可以读取保存在 Cookie 中的账号密码信息，自动填充到登录表单中，实现自动登录的功能。代码示例如下：
-- -------------------- ---- -------
-------- --------------- -
--- ------ - ---- - ----
--- -- - ---------------------------
------- ---- - - ---------- ---- -
--- - - ------
----- --------------- -- - - ------------------------
-- ------------------ -- -- ------ ------------------------------------
-
------ -----
-
-------- ------------ -
--- -------- - ----------------------
--- -------- - ----------------------
-- --------- -- --------- -
----------------------------------------- - ---------
----------------------------------------- - ---------
-
-上述代码中，getCookie() 函数用于读取 Cookie 中指定名称的数据。当用户再次访问该网站时，我们调用 checkLogin() 函数来检查是否存在保存的账号密码信息。如果存在，则自动填充到登录表单中，让用户无需再次输入账号密码信息即可完成登录。
总结
使用 Cookie 可以方便地实现记住账号密码的功能，提高用户体验。不过需要注意的是，保存敏感信息（如密码）时，应当对其进行加密处理，以提高安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2806