JavaScript 操作 Cookie：设置、读取与删除完整指南

前言

在开发过程中，常遇到需要记住用户在浏览器层面操作的需求。例如，曾实现一个基于拖拽插件的九宫格报表展示功能，每个图形模块支持显示或隐藏。当用户点击按钮切换可见性时，系统需在下一次访问时保留上次的操作结果。实现这一功能的核心在于使用 JavaScript 对 Cookie 进行读写：若用户隐藏某图形，则从 Cookie 中移除对应的 div 标识；若显示，则将标识写入 Cookie。本文仅聚焦于 Cookie 的操作逻辑，具体业务触发代码需结合实际情况编写。

什么是 Cookie？

• Cookie 的大小限制为 4KB，若超出此长度，返回值为空字符串；
• Cookie 存储于客户端，便于查看和修改，因此不适合存放敏感或重要信息；
• Cookie 的生命周期默认在浏览器关闭后结束。若需在特定时间段内持续有效，需为 Cookie 设置过期时间；

Cookie（复数形式 Cookies）指某些网站为了辨别用户身份、进行会话跟踪而储存在用户本地终端上的数据（通常经过加密）。定义于 RFC2109 和 2965 中的规范已废弃，最新取代的规范是 RFC6265 [1]。（也可视为浏览器缓存的一种形式） ——引用自百度百科

具体实现方法

1. 设置 Cookie：需传入参数 cname（Cookie 名称）、cvalue（Cookie 值）以及 exdays（Cookie 过期天数）。

function setCookie(cname,cvalue,exdays)
{
 var d = new Date();
 d.setTime(d.getTime()+(exdays*24*60*60*1000));
 var expires = "expires="+d.toGMTString();
 document.cookie = cname + "=" + cvalue + "; " + expires;
}

2. 获取 Cookie：通过名称读取对应的值。

function getCookie(cname)
{
 var name = cname + "=";
 var ca = document.cookie.split(';');
 for(var i=0; i<ca.length; i++) 
 {
 var c = ca[i].trim();
 if (c.indexOf(name)==0) return c.substring(name.length,c.length);
 }
 return "";
}

3. 删除 Cookie：通过修改过期时间为过去时间来实现删除。

function delCookie(cname)
{
 var exp = new Date(); 
 exp.setTime(exp.getTime()-1); 
 var cval = getCookie(cname);
 if(cval != null){
	document.cookie = cname + "=" + cval + ";expires=" + exp.toGMTString();
 }
}

希望这篇文章对你有所帮助，如果有用的话，记得关注我吆，后期持续为大家输出更多内容

参考：cookie操作

总结

到此这篇关于js利用cookie实现记住用户页面操作的文章就介绍到这了,更多相关js cookie记住用户内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！