html cookie登陆,简单操作 Cookie 注册登录

注意  :现在 一般来说浏览器都会禁止访问Cookie 建议在IE浏览器上操作

Main.html

//将用户名 密码 有效期存储到cookie中

function setCookie(name,value,days){

var date = new Date();

date.setDate(date.getDate() + days);

if(getCookie(name).length < 0){

document.cookie=name+"="+escape(value)+";"+((days==null)?"":"dates="+date.toGMTString());

return true;

}else{

return false;

}

}

//cookie中 存储是按照键值对 存储的

//根据name获取对应的值

function getCookie(name){

if(document.cookie.length > 0){

var start = document.cookie.indexOf(name + "=");

var end = -1;

if(start != -1){

start = start + name.length + 1;

end = document.cookie.indexOf(";" , start);

if(end == -1){

end = document.cookie.length;

}

return document.cookie.substring(start , end);

}

}

}

//注册功能

function register(){

var name = document.getElementById("name1").value;

var password = document.getElementById("password").value;

if(setCookie(name, password, 365)){

document.getElementById("name1").value="";

document.getElementById("password").value="";

alert("注册成功");

}else{

alert("注册失败!" + "该用户已存在!");

}

}

//登录功能

function login(){

var name = document.getElementById("name1").value;

var password = document.getElementById("password").value;

if(getCookie(name) == password){

alert("登录成功");

document.getElementById("name1").value="";

document.getElementById("password").value="";

}else{

alert("登录失败" + "用户名或者密码错误");

}

}

function show(){

if(document.cookie.length <= 0){

document.getElementById("div").innerHTML="没有内容";

}else{

document.getElementById("div").innerHTML=document.cookie;

}

}

用户名:

密码:

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要创建一个登录注册页面的 HTML 文件。以下是一个简单的例子: ``` <!DOCTYPE html> <html> <head> <title>Login/Register</title> </head> <body> <h1>Login/Register</h1> <form id="login-form"> <label for="username">Username:</label> <input type="text" id="username" name="username"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <button type="submit">Login</button> </form> <br> <form id="register-form"> <label for="new-username">New Username:</label> <input type="text" id="new-username" name="new-username"><br><br> <label for="new-password">New Password:</label> <input type="password" id="new-password" name="new-password"><br><br> <button type="submit">Register</button> </form> </body> </html> ``` 此 HTML 文件包含一个登录表单和一个注册表单。每个表单都有一个提交按钮。 接下来,你需要编写 JavaScript 代码来处理用户的登录和注册请求,并使用 cookie 存储用户信息。以下是一个例子: ``` // Get the login form and register form elements var loginForm = document.getElementById("login-form"); var registerForm = document.getElementById("register-form"); // Add event listeners for form submissions loginForm.addEventListener("submit", handleLoginSubmit); registerForm.addEventListener("submit", handleRegisterSubmit); // Function to handle login form submission function handleLoginSubmit(event) { event.preventDefault(); // Get the form data var username = document.getElementById("username").value; var password = document.getElementById("password").value; // TODO: Perform login validation // Set a cookie with the user's information document.cookie = "username=" + username + "; path=/"; document.cookie = "password=" + password + "; path=/"; // Redirect the user to the dashboard page window.location.href = "/dashboard.html"; } // Function to handle register form submission function handleRegisterSubmit(event) { event.preventDefault(); // Get the form data var newUsername = document.getElementById("new-username").value; var newPassword = document.getElementById("new-password").value; // TODO: Perform registration validation // Set a cookie with the user's information document.cookie = "username=" + newUsername + "; path=/"; document.cookie = "password=" + newPassword + "; path=/"; // Redirect the user to the dashboard page window.location.href = "/dashboard.html"; } ``` 此 JavaScript 代码将监听表单提交事件,并调用相应的函数来处理登录和注册请求。在处理请求时,它会获取表单数据并在 cookie 中存储用户信息。最后,它将重定向用户到仪表板页面。 请注意,上面的代码仅是一个示例,并且缺少必要的登录和注册验证。在实际应用中,你需要编写更多的代码来确保用户输入的准确性和安全性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值