下面是详细讲解“JavaScript 利用Cookie记录用户登录信息”的完整攻略：
什么是Cookie
Cookie即“小甜饼”，是浏览器存储在客户端（电脑客户端、手机客户端等）中的一小段文本，在HTTP请求和响应中被发送和接收。Cookie能够跟踪用户的活动并在用户重访时保存有关用户的信息。Cookie可以使用JavaScript进行控制。
利用Cookie记录用户登录信息的步骤
- 在用户登录过程中，在后端服务器中（如PHP）将用户ID和密码组成一个字符串，并使用加密算法对其进行加密。
- 将加密后的字符串存储为一个Cookie并发送给客户端。
- 用户浏览器接收到这个Cookie并存储在其中，当用户请求网站的其他页面时，浏览器将根据设置的Cookie发送给服务器。
- 后端服务器将会校验Cookie的有效性，如果Cookie有效就代表用户已经登录。
源代码：
登录页面html代码
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br>
<button type="button" onclick="check()">登录</button>
</form>
登录页面JavaScript代码
function check() {
// 获取用户名和密码输入框的值
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
// 判断输入是否为空
if (!username) {
alert("请输入用户名！");
return;
}
if (!password) {
alert("请输入密码！");
return;
}
// 加签名
let sign = btoa(username + "|" + password);
let cookieText = `user=${sign}`;
// 设置Cookie
let expires = new Date(Date.now() + 7 * 24 * 3600 * 1000).toGMTString();
document.cookie = `${cookieText}; expires=${expires}`;
alert("登录成功！");
}
其他页面JavaScript代码
function checkLogin() {
// 获取Cookie
let regStr = "(^| )user=([^;]*)(;|\x24)";
let reg = new RegExp(regStr);
let result = reg.exec(document.cookie);
if (result) {
let sign = result[2];
let data = atob(sign).split("|");
let username = data[0];
let password = data[1];
// 发送Ajax请求到后端验证身份
$.ajax({
url: "/check_login.php",
data: {
username: username,
password: password,
},
type: "post",
dataType: "json",
success: function (data) {
if (data.success) {
alert("已经登录！");
// do something
} else {
alert("请先登录！");
// do something
}
},
});
} else {
alert("请先登录！");
// do something
}
}
示例说明
示例1：记录用户选择的主题
在网站中，用户可以选择不同的主题，比如深色主题、浅色主题等，这些主题与用户的当次访问有关。如果用户再次访问网站时，希望网站显示上一次选择的主题。利用Cookie记录用户选择的主题可以实现这个需求。
实现步骤：
- 在用户选择主题时，将主题名称或其它标识作为Cookie的值存储在客户端。
- 当用户再次访问网站时，自动从Cookie值中读取用户上次选择的主题，并应用到网站页面中。
JavaScript代码示例：
// 定义函数，用于设置Cookie的值
function setCookie(cname, cvalue, exdays) {
let d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// 定义函数，用于获取Cookie的值
function getCookie(cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// 获取用户选择的主题，此处以radio按钮为例
document.getElementById("themeRadio").addEventListener("click", function() {
let theme = document.querySelector('input[name="theme"]:checked').value;
setCookie("theme", theme, 7);
});
// 页面加载时自动应用上次选择的主题
window.onload = function() {
let cookieTheme = getCookie("theme");
if (cookieTheme) {
document.getElementById(cookieTheme).checked = true;
// 应用主题，需要根据具体情况调用不同的方法或API
applyTheme(cookieTheme);
}
}
示例2：记住用户的输入信息
在网站中，用户可能需要填写一些表单信息，比如注册、留言等。如果用户在访问该网站时，希望能够保存上次填写的表单数据，可以使用Cookie来记录用户输入信息。
实现步骤：
- 监听表单输入事件，当用户输入时，将数据保存到Cookie中。
- 当用户再次访问该网站时，自动从Cookie中读取用户上次填写的表单数据，并自动填充到表单中。
JavaScript代码示例：
// 定义函数，用于设置Cookie的值
function setCookie(cname, cvalue, exdays) {
let d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// 定义函数，用于获取Cookie的值
function getCookie(cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// 监听表单输入事件
document.querySelector("#myForm").addEventListener("input", function() {
let formData = JSON.stringify(serialize(this));
setCookie("formData", formData, 7);
});
// 页面加载时自动填充上次保存的表单数据
window.onload = function() {
let cookieFormData = getCookie("formData");
if (cookieFormData) {
let formDataObj = JSON.parse(cookieFormData);
let inputElems = document.querySelectorAll("#myForm input");
for (let i = 0; i < inputElems.length; i++) {
let inputElem = inputElems[i];
if (formDataObj[inputElem.name]) {
inputElem.value = formDataObj[inputElem.name];
}
}
}
}
// 序列化表单数据
function serialize(form) {
if (!form || form.nodeName !== "FORM") {
return;
}
let i, j, obj = {};
for (i = form.elements.length - 1; i >= 0; i = i - 1) {
if (form.elements[i].name === "") {
continue;
}
switch (form.elements[i].nodeName) {
case 'INPUT':
switch (form.elements[i].type) {
case 'text':
case 'hidden':
case 'password':
case 'button':
case 'reset':
case 'submit':
obj[form.elements[i].name] = form.elements[i].value;
break;
case 'checkbox':
case 'radio':
if (form.elements[i].checked) {
obj[form.elements[i].name] = form.elements[i].value;
}
break;
case 'file':
break;
}
break;
case 'TEXTAREA':
obj[form.elements[i].name] = form.elements[i].value;
break;
case 'SELECT':
switch (form.elements[i].type) {
case 'select-one':
obj[form.elements[i].name] = form.elements[i].value;
break;
case 'select-multiple':
for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
if (form.elements[i].options[j].selected) {
obj[form.elements[i].name] = form.elements[i].options[j].value;
}
}
break;
}
break;
case 'BUTTON':
switch (form.elements[i].type) {
case 'reset':
case 'submit':
case 'button':
obj[form.elements[i].name] = form.elements[i].value;
break;
}
break;
}
}
return obj;
};
以上是JavaScript利用Cookie记录用户登录信息的完整攻略及其两个示例说明。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript 利用Cookie记录用户登录信息 - Python技术站
微信扫一扫 
支付宝扫一扫 