JavaScript 实现 Cookie 记录用户名的完整方案
作者:函数茶馆时间:2026-10-29 17:49:39浏览:629
本文详解如何利用 JavaScript 操作 Cookie 来持久化存储用户名。通过封装 setCookie 函数设置过期时间,并在页面加载时读取 Cookie 值回填至输入框,实现用户登录信息的自动记忆功能。
JavaScript Cookie 记录用户名方案
本文详细介绍了一种基于 JavaScript 的 Cookie 技术,用于在浏览器端持久化存储用户登录名。该方案旨在为开发者提供一套可参考的实现逻辑,帮助理解前端数据持久化的基本方法。
核心逻辑在于利用 Cookie 机制:当用户点击登录按钮时,系统将用户名写入 Cookie;下次用户访问页面时,脚本会自动读取已存储的 Cookie 数据,并将其赋值给文本输入框()的 value 属性,从而完成用户名的自动填充。
HTML 表单与 JavaScript 实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function setCookie(name, value, iDay)
{
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay); //用来设置过期时间用的,获取当前时间加上传进来的iDay就是过期时间
document.cookie=name+'='+value+';expires='+oDate;
};
function getCookie(name)
{
var arr=document.cookie.split('; '); //多个cookie值是以; 分隔的,用split把cookie分割开并赋值给数组
for(var i=0;i<arr[i].length;i++) //历遍数组
{
var arr2=arr[i].split('='); //原来割好的数组是:user=simon,再用split('=')分割成:user simon 这样可以通过arr2[0] arr2[1]来分别获取user和simon
if(arr2[0]==name) //如果数组的属性名等于传进来的name
{
return arr2[1]; //就返回属性名对应的值
}
return ''; //没找到就返回空
}
};
function removeCookie(name)
{
setCookie(name, 1, -1); //-1就是告诉系统已经过期,系统就会立刻去删除cookie
};
window.onload=function()
{
var form=document.getElementById('form');
var user=document.getElementsByName('user')[0];
form.onsubmit=function()
{
setCookie('user', user.value, 14);
};
user.value=getCookie('user');
};
</script>
</head>
<body>
<form action="" id="form">
用户名:<input type="text" name="user" /><br />
密码:<input type="password" name="pass" /><br />
<input type="submit" value="登录" />
</form>
</body>
</html>
通过上述步骤,即可实现用户名的本地记忆功能,该示例对理解 JavaScript 与 Cookie 的交互机制具有实际参考价值。
作者最新文章
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41
