javascript Create a welcome cookie

本文介绍了一种使用JavaScript来实现浏览器Cookie的基本操作方法,包括获取、设置及检查Cookie等功能。通过这些功能,网站可以记住用户的偏好设置,提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html>
<head>
<script>
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
  {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name)
    {
    return unescape(y);
    }
  }
}


function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}


function checkCookie()
{
var username=getCookie("username");
if (username!=null && username!="")
  {
  alert("Welcome again " + username);
  }
else 
  {
  username=prompt("Please enter your name:","");
  if (username!=null && username!="")
    {
    setCookie("username",username,365);
    }
  }
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>


以下是一个简单的使用cookie实现登录的示例代码,仅供参考: ```javascript const http = require('http'); const querystring = require('querystring'); const queryString = require('querystring'); const cookie = require('cookie'); // 用户数据 const users = { alice: { password: 'alicepwd', name: 'Alice' }, bob: { password: 'bobpwd', name: 'Bob' } }; // 生成cookie字符串 function generateCookie(user) { return cookie.serialize('user', user.name, { path: '/', httpOnly: true, maxAge: 60 * 60 // 单位为秒 }); } // 解析cookie字符串 function parseCookie(cookieStr) { return cookie.parse(cookieStr || ''); } const server = http.createServer((req, res) => { if (req.url === '/login' && req.method === 'POST') { // 处理登录请求 let body = ''; req.on('data', chunk => { body += chunk.toString(); }); req.on('end', () => { const { username, password } = querystring.parse(body); const user = users[username]; if (user && user.password === password) { // 登录成功,将用户信息写入cookie res.setHeader('Set-Cookie', generateCookie(user)); res.statusCode = 302; res.setHeader('Location', '/'); res.end(); } else { // 登录失败,重定向到登录页面 res.statusCode = 302; res.setHeader('Location', '/login'); res.end(); } }); } else { // 处理其他请求 const cookies = parseCookie(req.headers.cookie); const user = cookies.user && users[cookies.user]; if (user) { // 已登录,显示欢迎信息 res.setHeader('Content-Type', 'text/html;charset=utf-8'); res.write(`<h1>Welcome, ${user.name}!</h1>`); res.write('<p>Click <a href="/logout">here</a> to logout.</p>'); res.end(); } else if (req.url === '/login') { // 显示登录页面 res.setHeader('Content-Type', 'text/html;charset=utf-8'); res.write(` <form method="post" action="/login"> <label for="username">Username:</label> <input type="text" name="username" id="username"><br> <label for="password">Password:</label> <input type="password" name="password" id="password"><br> <button type="submit">Login</button> </form> `); res.end(); } else { // 未登录,重定向到登录页面 res.statusCode = 302; res.setHeader('Location', '/login'); res.end(); } } }); server.listen(3000, () => { console.log('Server is listening on port 3000'); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值