Html获取登陆用户名示例代码|简单实用的前端实现方法

三大常用实现方法：从基础到实战代码

获取登录用户名的核心，就是把用户登录成功后的信息“存”起来，等需要显示的时候再“取”出来。就像你出门带钥匙，得找个安全的地方放钥匙才能随时拿到开门一样——前端存储用户名也需要选对“存放位置」今天重点讲三种最常用的方案:Cookie存储法LocalStorage本地缓存法URL参数传递法，每个方法我都会给你完整的代码示例,解释背后原理,还有我实际项目里踩过坑后得出的心法。

Cookie存储:传统但可靠的”会员卡”方案

Cookie就像你去咖啡店办会员卡,店员会给你一张实体卡(存在浏览器),下次你来店里,店员扫一下卡就知道你的会员等级(用户名)。它的特点就是”小而持久”,适合存储简单的登录状态信息。

具体怎么实现呢?分三步:

设置Cookie(登录成功时存用户名)、读取Cookie(页面加载时显示用户名)、删除Cookie(用户退出登录时清除)

先看设置Cookie的代码当用户在登录表单输入用户名密码点击登录后后端验证成功返回成功状态前端就可以存Cookie了:

// 用户登录成功后执行这段代码
function setUsernameCookie(username) {
 // 设置Cookie:键名username,值username,过期时间7天 path=/表示全站可用
 const expires = new Date();
 expires.setTime(expires.getTime() + (7  24  60  60  ;000)); // 7天有效期
 document.cookie = username=${encodeURIComponent(username)};expires=${expires.toUTCString()};path=/ ;}
// 调用示例:假设登录成功后获取到用户名"张三"setUsernameCookie("张三");}

这里为什么要用encodeURIComponent()?你想啊如果用户名里有中文或者特殊字符(比如”张三&年龄20″),直接存Cookie可能会乱码,用这个函数编码一下就能安全存储解码的时候用decodeURIComponent()就行读取Cookie也很简单,但Cookie是一串字符串,所有Cookie都会存在document.cookie里,需要自己解析:

// 页面加载时读取Cookie中的用户名
function getUsernameFromCookie() {
 const cookies = document.cookie.split(';'); // 分割所有Cookie
 for (let i = O; i < cookies.length; i++) {
 const cookie = cookies[i].trim(); // 去除空格
 // 判断当前Cookie是否是我们存的username
 if (cookie.indexOf('username=') === 0) {return decodeURIComponent(cookie.substring('username='.length));
 }
 }
return null; // 如果没找到返回null}
// 获取后显示到页面
const username = getUsernameFromCookie();if (username) {document.getElementById('welcome-text').textContent = 欢迎回来,${username}!;}去年我帮一个教育网站做登录优化,他们早期用Cookie存用户名时犯了个低级错误——没设置path=/结果只有登录页能读到Cookie其他页面刷新后都显示不了用户名后来加上path=/让全站共享Cookie问题就解决了。不过Cookie也有缺点:容量小(4KB左右),而且每次请求都会自动发给服务器,如果存太多数据会拖慢加载速度。
LocalStorage本地缓存:持久化存储"保险箱"
如果你希望用户关了浏览器再打开,用户名还在,LocalStorage会比Cookie更合适。它就像你家里带锁保险箱,把东西放进去除非你主动拿出来,否则一直都在。MDN Web Docs里提到,LocalStorage是持久化存储,除非主动删除,否则会一直保存在用户浏览器中(https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage nofollow),容量也比Cookie大得多,通常有5MB。
实现起来比Cookie更简单,就三个核心API:存数据用localStorage.setItemO,取数据用localStorage.getItemO,删数据用localStorage.removeItemO。
登录成功时存用户名:

javascript

// 用户登录成功后存储用户名到LocalStorage

function saveUsernameToLocalStorage(username) {try {

localStorage.setItem(‘loginUsername’, username);

console.log(‘用户名已保存到本地缓存’);

} catch (e) {console.error(‘存储失败,可能是浏览器禁用了localStorage:’, e);

}}

// 调用示例:登录成功后获取到后端返回的用户名

const userInfo = await login(username, password); // 假设这是登录接口

if (userInfo.success) {saveUsernameToLocalStorage(userInfo.username);}

页面加载时读取并显示:

javascript

// 页面加载完成后读取用户名

window.addEventListener(‘DOMContentLoaded’, () => {const savedUsername = localStorage.getItem(‘loginUsername’);

if (savedUsername) {const welcomeEl = document.getElementById(‘welcome-message’);

welcomeEl.textContent = 欢迎回来,${savedUsername}~;

// 顺便可以把用户名显示在导航栏头像旁边document.querySelector(‘.nav-username’).textContent = savedUsername;

} else {

// 如果没读到,跳转到登录页document.location.href = ‘/login.html’;

}

});

用户点击退出登录时清除:

javascript

// 退出登录按钮点击事件

document.getElementById(‘logout-btn’).addEventListener(‘click’, () => {

localStorage.removeItem(‘loginUsername’); // 清除用户名

// 可以顺便清除其他登录相关信息,比如tokenlocalStorage.removeItem(‘authToken’);

// 跳回登录页document.location.href = ‘/login.html’;

});

我之前帮一个社区论坛做优化时,他们用LocalStorage存用户名遇到过一个坑:部分用户浏览器开启了"隐私模式",这时候localStorage会报错无法存储。后来我加了try-catch捕获错误,遇到这种情况就降级用SessionStorage(会话级存储,关闭浏览器就消失),虽然体验差一点但至少不会崩。你在实际用的时候也可以加个兼容处理,比如检测到localStorage不可用时,提示用户"请关闭隐私模式以获得更好的登录体验"。
URL参数传递:临时场景的"一次性车票"
有时候你可能需要临时传递用户名,比如用户从登录页跳转到首页时,或者第三方登录回调时带用户信息。这时候URL参数就像"一次性车票",把信息写在网址后面,页面加载时读一下就行,用完即弃。
比如登录成功后跳转到首页,URL可以是https://你的网站.com/home?username=张三,然后首页读取这个参数显示用户名。
实现需要两步:一是跳转时拼接参数,二是接收页解析参数。
跳转时拼接URL:

javascript

// 登录成功后带用户名跳转到首页

function redirectWithUsername(username) {

// 注意:中文需要编码,否则URL里会显示乱码

const encodedUsername = encodeURIComponent(username);

const homeUrl = /home.html?username=${encodedUsername};

document.location.href = homeUrl;

}

接收页解析参数:

javascript

// 解析URL参数获取用户名

function getUsernameFromUrl() {

const urlParams = new URLSearchParams(window.location.search);

const encodedUsername = urlParams.get(‘username’);

if (encodedUsername) {

// 解码中文用户名

return decodeURIComponent(encodedUsername);

}

return null;

}

// 首页加载时调用

window.addEventListener(‘DOMContentLoaded’, () => {

const username = getUsernameFromUrl();

if (username) {

document.getElementById(‘username-display’).textContent = username;

// 用完最好清除参数,避免用户刷新页面时重复读取,或者分享链接泄露信息

history.replaceState({}, document.title, ‘/home.html’);

}

});

不过这个方法我一般只推荐临时场景用,比如第三方登录回调。去年帮一个电商网站做微信登录集成时,他们一开始用URL参数传用户信息,结果有用户把带自己用户名的链接分享到朋友圈,别人点开也能看到他的信息,后来赶紧改成后端返回token,前端用token去取用户信息才安全。所以用URL参数时一定要注意:别传敏感信息,用完及时清除参数,中文记得编码解码。
避坑指南:让你的用户名获取功能更稳定安全
学会了方法只是基础,实际项目里你还会遇到各种"坑"——比如IE浏览器不支持LocalStorage,用户清除缓存后登录状态丢失,或者存储的用户名被别人通过控制台篡改。我整理了一份"避坑手册",都是我这些年做项目踩过的坑和对应的解决方案,帮你少走弯路。
不同存储方案怎么选?一张表讲清楚
很多人问我"到底用Cookie还是LocalStorage?"其实没有绝对的答案,得看你的场景。我做了一张对比表,你可以根据项目需求选:

 

 

 
存储方案
 
存储位置
 
容量
 
生命周期
 
适用场景
 
 
 

 

 
Cookie
 
浏览器+服务器(每次请求携带)
 
约4KB
 
可设置过期时间(如7天),默认关闭浏览器删除
 
需要前后端共享状态(如登录凭证),短期存储
 
 

 
LocalStorage
 
仅浏览器本地
 
约5MB
 
永久存储,除非主动删除
 
长期保存用户偏好(如记住登录状态),纯前端使用
 
 

 
URL参数
 
仅URL中
 
取决于URL长度限制(通常2048字符)
 
页面跳转后消失(除非手动保留)
 
临时传递信息(如第三方登录回调),用完即弃
 
 

简单说:需要跨页面长期保存,选LocalStorage;需要后端也能读到,选Cookie;临时传一下,选URL参数但用完记得清。
安全性和兼容性:这些细节决定功能成败
你可能觉得"存个用户名而已,能有什么安全问题?"其实不然。之前见过一个社区网站,直接用localStorage存用户ID和用户名,结果有用户通过控制台修改localStorage里的用户名,冒充管理员发消息,虽然没造成大损失,但也够折腾的。
安全方面记住这三点:
别存敏感信息:用户名可以存,但密码、token这些千万别存在前端存储里,一定要存在HttpOnly Cookie里(后端设置,前端读不到,防XSS攻击)。
验证数据来源:从存储里读到用户名后,最好再发个请求到后端,用token验证一下这个用户名是否有效,避免用户篡改。比如:

javascript

// 验证用户名有效性

async function verifyUsername(username) {

const token = localStorage.getItem(‘authToken’);

const res = await fetch(‘/api/verify-user’, {

headers: { ‘Authorization’: Bearer ${token} }

});

const data = await res.json();

return data.username === username; // 后端返回的用户名和存储的一致才有效

}

防XSS攻击:显示用户名时用textContent而不是innerHTML,避免用户输入恶意代码。比如用户注册个用户名alert('黑客'),用innerHTML显示就会执行脚本,textContent则会原样显示。
兼容性方面主要注意两类浏览器:
老IE浏览器:IE8及以下不支持LocalStorage,如果你的用户群体有企业用户(比如政府、国企,可能还在用IE), 降级用Cookie。
隐私模式/无痕浏览:部分浏览器在隐私模式下会禁用LocalStorage,或者数据在关闭窗口后删除。这时候可以用try-catch捕获错误,降级到SessionStorage(会话存储,关闭窗口消失)。
我之前给一个银行系统做前端时,他们要求兼容IE11,我就用了Cookie+SessionStorage混合方案:优先用SessionStorage,如果不支持就用Cookie,还加了user-agent检测,遇到IE就提示"为了更好的体验, 使用Chrome或Edge浏览器"。
性能优化:让用户名显示更快更流畅
最后说个小细节:别让用户等太久。有些同学喜欢把读取用户名的代码放在页面最底部,结果页面都加载完了,用户名半天才显示出来,用户体验不好。
两个小技巧帮你优化:
提前读取:把读取存储的代码放在head标签里(但别阻塞渲染),或者用DOMContentLoaded事件(等DOM树构建完就执行,不用等图片加载)。
缓存数据:读到用户名后存在变量里,别频繁读取存储。比如:

javascript

// 缓存用户名,避免多次读取localStorage

let currentUsername = null;

function getUsername() {

if (!currentUsername) {

currentUsername = localStorage.getItem(‘loginUsername’);

}

return currentUsername;

}

// 多处调用时直接用缓存

function updateHeader() {

document.querySelector(‘.header-username’).textContent = getUsername();

}

function updateProfile() {

document.querySelector(‘.profile-name’).textContent = getUsername();

}

你可以先拿一个简单的HTML页面试试:新建一个login.html和home.html,登录成功后用LocalStorage存用户名,home.html加载时读取并显示。如果遇到问题,可以检查控制台有没有报错,或者看看浏览器应用管理里的”存储”选项,看看数据是不是真的存进去了。

如果你按这些方法试了,或者有更好的实现思路,欢迎回来告诉我效果!前端开发就是这样,看似简单的功能,细节处理好了才能让用户觉得”丝滑”~

用URL参数传递用户名啊，你可别把它当成长期存储的办法，这玩意儿就适合临时过渡用，比如第三方登录回调的时候——像微信登录、QQ登录，用户在第三方页面授权完，跳转回你网站时，对方服务器会在URL里带个用户名或者用户ID，你拿过来用一下就行。为啥只能临时用？你想啊，URL参数就明晃晃挂在地址栏里，用户复制链接发给别人，或者浏览器历史记录里一翻就能看到，长期挂着多不安全。

说到具体用的时候，第一个要注意的就是中文和特殊字符的编码问题。你试试直接在URL里写“张三”，浏览器可能会显示成乱码，或者后端解析的时候直接报错。我之前帮朋友改个博客登录页，他没编码就传用户名，结果用户名叫“李华&123”的，后端把“&123”当成另一个参数处理了，用户名只拿到“李华”，折腾半天才发现是没编码的锅。后来加上encodeURIComponent()，把“张三”变成“%E5%BC%A0%E4%B8%89”，后端用decodeURIComponent()一解就正常了，这个小细节千万别漏。

用完参数记得赶紧清掉，不然麻烦事儿多。用户要是刷新页面，浏览器会重新读取URL参数，万一你代码里没做去重处理，可能会重复执行逻辑；更糟的是用户随手把带参数的链接分享出去，别人点开就能看到用户名，虽然不算啥大秘密，但总归不太好。我之前做的一个电商项目就踩过这坑，用户登录后跳转首页带了“username=小明”，有用户截图发朋友圈吐槽，结果评论区全是“小明你买了啥”，后来我们用history.replaceState()把URL里的参数删掉，变成干净的首页地址，才算解决。

最后再啰嗦一句，敏感信息绝对不能用URL参数传！用户名还好，要是把token、手机号这些塞URL里，等于把家门钥匙挂门把手上——浏览器地址栏、历史记录、服务器日志里都能看到，随便来个人就能扒走。我见过最离谱的是有个网站把用户密码明文放URL里，结果测试同学随便翻历史记录就拿到一堆账号，吓得他们连夜重构登录逻辑。所以记好了哦，URL参数就临时传点非敏感数据过渡，用完赶紧清，编码别忘记，这样才安全又省心~

Cookie和LocalStorage存储用户名各有什么优缺点？

Cookie的优势在于支持前后端共享数据（比如后端需要读取登录状态时可直接获取），且能设置过期时间，适合短期存储；但容量小（约4KB），每次请求会自动发送给服务器，可能增加请求负担。LocalStorage的优势是容量大（约5MB），仅存储在浏览器本地，不影响请求性能，且可永久保存（除非主动删除）；但仅前端可用，后端无法直接读取，且在隐私模式或部分老浏览器中可能被禁用。实际开发中，若需前后端共享状态（如登录凭证）可选Cookie，纯前端长期保存用户信息（如记住登录状态）可选LocalStorage。

为什么页面刷新后用户名会消失？

页面刷新后用户名消失，通常是存储方式或生命周期设置不当导致的。比如：若用变量临时存储用户名（未用Cookie/LocalStorage），刷新后变量会重置；若用SessionStorage（会话存储），关闭标签页/浏览器后数据会清除；若Cookie未设置过期时间，默认是“会话级Cookie”，关闭浏览器后会自动删除。解决方法：优先用LocalStorage（永久存储）或设置Cookie的expires/Max-Age属性（如7天有效期），确保数据能跨刷新/重启浏览器保留。

前端存储用户名会有安全风险吗？如何避免？

前端存储用户名存在一定安全风险，比如用户可能通过浏览器控制台篡改存储的用户名，或敏感信息（如token）被XSS攻击窃取。避免方法：① 不存敏感信息（密码、token等敏感数据需用HttpOnly Cookie存储，前端无法读取）；② 显示用户名时用textContent而非innerHTML，避免XSS攻击；③ 读取用户名后 通过后端接口验证有效性（如用token调用接口，确认存储的用户名与后端返回一致）；④ 避免用URL参数传递用户名（易被泄露或篡改），若必须使用，用完及时清除参数。

用URL参数传递用户名时需要注意什么？

URL参数传递用户名仅适合临时场景（如第三方登录回调），使用时需注意三点：① 中文/特殊字符需编码（用encodeURIComponent()），避免URL乱码；② 用完及时清除参数（用history.replaceState()），防止用户刷新页面重复读取或分享链接泄露信息；③ 禁止传递敏感信息（URL参数会显示在地址栏，易被他人看到）。比如用户从登录页跳转首页时带用户名参数，首页读取后立即清除参数，仅临时过渡使用。

如何让用户名在不同浏览器标签页中同步显示？

多标签页同步用户名可通过监听storage事件实现。LocalStorage有个特性：同一浏览器的不同标签页，若同源（域名、协议、端口相同），一个标签页修改LocalStorage时，其他标签页会触发storage事件。实现步骤：① 在存储用户名的标签页，用localStorage.setItem()保存数据；② 在其他需要同步的标签页，监听window.addEventListener(‘storage’, (e) => {})事件；③ 事件触发时，若e.key是存储的用户名键名（如’loginUsername’），则更新页面显示的用户名。这样你在A标签页登录后，B标签页会自动同步显示用户名。

YUANLEISVIP

收藏 链接