在前端开发中，有时候需要在网站上存储一些信息，以便用户下次访问时能够快速恢复之前的状态。这时候，我们就可以使用cookie来实现。
什么是cookie？
Cookie是一种小型的文本文件，被存储在用户计算机上。当用户访问网站时，服务器会向用户的浏览器发送一个cookie，浏览器会将该cookie保存在本地。当用户再次访问该网站时，浏览器会将该cookie发送给服务器，从而实现数据的读取和写入。
如何设置cookie？
在Javascript中，可以通过document.cookie属性直接操作cookie。下面是一个简单的例子：
document.cookie = "name=value";
此代码将在当前域名下创建一个名为name的cookie，并将其值设置为value。
但是这个cookie是会一直存在的，如果我们想让它在一定时间后自动过期怎么办呢？
设置cookie过期时间
要设置cookie的过期时间，我们需要在cookie字符串中添加expires选项。expires选项指定了cookie的过期时间，它的值应该是一个GMT格式的日期字符串。
下面是一个例子，将cookie的过期时间设置为一小时后。
let d = new Date(); d.setTime(d.getTime() + (1*60*60*1000)); let expires = "expires="+ d.toUTCString(); document.cookie = "name=value;" + expires;
这里用到了Javascript中的Date对象，通过设置时间偏移量来计算出当前时间1小时后的日期，并将其转换成GMT格式字符串。
完整示例代码
-- -------------------- ---- -------
-------- ---------------- ------- -------- -
--- - - --- -------
--------------------- - ----------------------
--- ------- - ----------- ----------------
--------------- - ----- - --- - ------ - --- - ------- - ----------
-
-------- ---------------- -
--- ---- - ----- - ----
--- ------------- - ------------------------------------
--- -- - -------------------------
------- - - -- - - ---------- ---- -
--- - - ------
----- ------------ -- - -- -
- - ---------------
-
-- ---------------- -- -- -
------ ------------------------ ----------
-
-
------ ---
-上面是一个常见的设置和获取cookie的工具函数。在setCookie函数中，我们可以通过传入过期时间参数来设置cookie的过期时间。在getCookie函数中，我们可以根据cookie名称获取对应的值。需要注意的是，在设置cookie时还需要指定cookie路径（可选，默认为当前页面路径）。
总结
通过本文，我们学习了如何使用Javascript在浏览器中设置cookie，并实现了在一定时间后自动过期的功能。这种做法可以帮助我们在前端开发中更好地管理数据状态，并提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26903