使用cookie保存用户的登录状态——初步实现

保存用户的登录状态是许多网站都会使用,一般会使用session、数据库或者cookie和session相结合的办法,这里我们了解 cookie的方法来保存用户登录状态.

Cookie 是在 HTTP 协议下,服务器或脚本可以维护客户工作站上信息的一种方式。Cookie 是由 Web 服务器保存在用户浏览器(客户端)上的小文本文件,它可以包含有关用户的信息。无论何时用户链接到服务器,Web 站点都可以访问 Cookie 信息。
目前有些 Cookie 是临时的,有些则是持续的。临时的 Cookie 只在浏览器上保存一段规定的时间,一旦超过规定的时间,该 Cookie 就会被系统清除。
持续的 Cookie 则保存在用户的 Cookie 文件中,下一次用户返回时,仍然可以对它进行调用。在 Cookie 文件中保存 Cookie,有些用户担心 Cookie 中的用户信息被一些别有用心的人窃取,而造成一定的损害。其实,网站以外的用户无法跨过网站来获得 Cookie 信息。如果因为这种担心而屏蔽 Cookie,肯定会因此拒绝访问许多站点页面。因为,当今有许多 Web 站点开发人员使用 Cookie 技术,例如 Session 对象的使用就离不开 Cookie 的支持。

这里,针对我上一次做的ajax登录的页面进行添加cookie保存登录状态的操作…

首先,介绍一下cookie的读写 :

document.cookie = “cookie名=” + 值 + “;expires=” + 有效时间;
其中expires的值表示cookie的有效时间.

//写入cookie
var exp = new Date();
exp.setTime(exp.getTime() + 1000 * 60 * 60 * 24); //这里表示保存24小时
document.cookie = "music_identify=" + id + ";expires=" + exp.toGMTString();
  • 1
  • 2
  • 3
  • 4

读取cookie : 因为document.cookie返回的是一个字符串,包含了当前域名储存在本地的所有cookie,所以,我们需要对这个cookie字符串进行分割,找出我们需要的信息,下面是一个用于获取cookie的函数:

/* 获取指定cookie */
function getCookie(name) {var strCookie = document.cookie;var arrCookie = strCookie.split("; ");for (var i = 0; i < arrCookie.length; i++) {var arr = arrCookie[i].split("=");if (arr[0] == name)return arr[1];}return "";
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

我们首先将document.cookie取得的cookie字符串进行拆分,得到一条一条的记录,然后我们在逐条以”=”进行拆分,在这一过程中,如果遇到传入的name值等于”=”号前面的字符串,说明我们要找的cookie记录就是那一个,随即返回这个字符串,否则的话返回”“空字符串.

介绍完读写之后,我们就可以开始模拟用户登录,并在cookie保存用户的登录信息了

/* Ajax登录 */
function ajaxLogin(id, pass, classes) {var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp = new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.open("GET", "pages/loginByNav.php?user_id=" + id + "&user_pass=" + pass, false);xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {if (xmlhttp.responseText != 0) {var textArray = xmlhttp.responseText.split("|");document.getElementById("inputBox").innerHTML = "<h3>欢迎回来," + textArray[1] + "</h3><img class='img-responsive img-circle' src='" + textArray[3] + "'>";document.getElementById("user_name_nav").innerHTML = " " + textArray[1] + ",欢迎你!";document.getElementById("user_img_nav").setAttribute("src", textArray[3]);document.getElementById("user_info_nav").style.visibility = "";document.getElementById("loginAndReg").style.visibility = "hidden";document.getElementById("loginAndReg1").style.visibility = "hidden";//增加的保存cookie代码var exp = new Date();var passHash = hex_md5(pass);exp.setTime(exp.getTime() + 60 * 1000 * 60 * 24); //24小时document.cookie = "music_identify=" + id + ";expires=" + exp.toGMTString();document.cookie = "music_key_code=" + passHash + ";expires=" + exp.toGMTString();//新增结束player(textArray[4]);} else {var login = document.getElementById("login_to");login.setAttribute("class", classes);login.innerHTML = "<i class='glyphicon glyphicon-log-in'></i> 登 录";removeElem("warningTip");var tips = "账号或密码错误!";var form = document.getElementById("form1");form.insertBefore(alertBox(tips, "warning"), form.childNodes[0]);}}};xmlhttp.send();
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

参照上一篇博文的内容,我们对它进行了修改,增加了在登录成功后,将登录信息写入到cookie,并设置有效期为24小时,这样,用户在成功登录后,信息便自动保存到了cookie中,我们在浏览器中查看一下

这里写图片描述

这里写图片描述

好的,第一步完成了..

接下来就是当用户刷新页面,或者离开页面再次回来且还在cookie的有效期内的时候,我们能识别该用户,让其不必再次登录

/* 读取cookie识别登录状态 */
function checkLogin() {if (getCookie("music_identify") != "" && getCookie("music_key_code") != "") {var id = getCookie("music_identify"),pass = getCookie("music_key_code"),xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp = new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.open("GET", "pages/loginByCookie.php?user_id=" + id + "&user_pass=" + pass, false);xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {if (xmlhttp.responseText != 0) {//do something ...} else {//do something ...}}};xmlhttp.send();}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

读取本地cookie,通过ajax将数据发送到服务器验证,通过后即登录

然后是当用户点击退出登录或者切换帐号时,删除当前帐号保存的cookie信息,然后刷新页面

/* 退出登录刷新页面,删除cookie状态 */
function exitLogin() {document.cookie = "music_identify=";document.cookie = "music_key_code=";window.location.reload(true);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

到这里,我们的cookie保存用户登录状态就已经初步实现了!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/50900.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决Ubuntu的root账号无法登录SSH问题-Permission denied, please try again.

有时&#xff0c;我们登录SSH的时候&#xff0c;会出现如下问题&#xff1a; 此时&#xff0c;是因为系统默认禁止root用户登录ssh&#xff0c;此时我们可以这样解决&#xff1a; 首先&#xff0c;CtrlC退出密码输入界面&#xff1a; 然后输入&#xff1a;su - tips&#xff1a…

chatgpt赋能Python-pythonwxpy

Python的wxpy模块&#xff1a;一款强大的微信机器人框架 在当今数字时代&#xff0c;微信已经成为了大家日常生活中不可缺少的应用。wxpy是一款使用Python语言的微信机器人框架&#xff0c;可以帮助用户实现诸如自动回复、消息提醒、定时发送消息等自动化操作。它的易用性、强…

马云获聘港大荣誉教授/ 马斯克回应星舰发射架损坏/ 谷歌Bard更新...今日更多新鲜事在此...

日报君 发自 凹非寺量子位 | 公众号 QbitAI 大家好&#xff0c;今天是4月23日星期日&#xff0c;调休的周末心情belike&#xff1a; 今天科技圈有哪些新鲜事儿&#xff0c;和日报君一起来看看~ 星舰发射架损坏&#xff0c;马斯克回应 据华盛顿邮报报道&#xff0c;SpaceX发射星…

巴比特 | 元宇宙每日必读:游戏是AIGC应用的首选场景?游戏厂商如何利用AIGC提升产能?...

摘要&#xff1a;据手游矩阵报道&#xff0c;作为科技含量最高的创作领域&#xff0c;游戏行业对AI的利用根本无需等到ChatGPT这样的风口&#xff0c;而是早就已经在跑步入场了。国内厂商更多是将AI定位为效率工具&#xff0c;而非炒作手段。游戏厂商无论大小&#xff0c;只要手…

企划案与GPT4ALL

企划案与GPT4ALL 近日&#xff0c;需要写一份服装店的企划方案 疫情已经彻底过去&#xff0c;告别三年来的经营上面的负面因素。各行各业也正在如火如荼地争取最快的速度恢复生意。因为我所经营的服装店近来需要做一个2024年的企划方案&#xff0c;所以在最近GPT4ALL很火的情…

五月到了,再来看看ChatGPT给我们带来了什么吧!

ChatGPT&#xff0c;即聊天生成预训练转换器&#xff08;Chat Generative Pre-trained Transformer&#xff09;&#xff0c;是美国OpenAI公司基于GPT-3.5架构&#xff08;目前已经更新到GPT-4&#xff0c;但仅限于Plus用户&#xff09;研发和强化训练的一款人工智能聊天机器人…

招聘网站数据分析岗位数据分析(Excel实现)

数据分析案例 明确分析的目的数据处理原始数据数据清洗选择子集重复数据处理 缺失数据处理数据转化数据提取-字段分割异常值处理 数据分析1.需求在哪里&#xff1f;2.需要什么样的人才&#xff1f;3.什么阶段需求最旺&#xff1f; 结论 明确分析的目的 • Where——需求在哪里…

某招聘网站“数据分析”相关岗位招聘信息爬取并分析

确定目标 简单分析数据分析相关岗位的薪酬状况及技能要求&#xff1b;尝试数据分析从数据获取到数据分析报告撰写的整个数据分析流程&#xff0c;学习爬虫、数据清洗、数据分析相关技巧。 数据获取 获取的岗位数据来源于某招聘网站&#xff0c;采取爬虫的方式获取,岗位搜索…

OGG-01028分析处理

1.现象 ogg的安装目录使用率达到100%&#xff0c;果断时间会释放短时间又会达到使用率100%。 2.分析 2.1 如果是队列文件问题不应该自己释放短时间又达到100%&#xff0c;查看到底是哪个目录导致。 du -sm /home/oracle/oggsource/*|sort -n 83 replicat 277 dir…

医药行业数据分析软件(含非付费)--对比分析

目前主要使用的医药数据软件分为两大类&#xff0c;一个是免费医药数据软件&#xff0c;一个是商业综合类的医药数据软件。医药数据软件的本质是让用户能在最短时间内在一个网站把想要的信息通过检索一览无余&#xff0c;因此&#xff0c;全面性、准确性、及时性是该类数据库的…

医药行业的销售数据如何分析?

本文转自公众号叨叨侠爱叨叨 ▌一、医药行业的体系 医疗属于大健康行业&#xff0c;大健康&#xff08;Healthcare Industry&#xff09;行业一般是指经济体系中向患者提供预防、治疗、康复等服务部门的总和&#xff0c;更接近于我国的医疗卫生服务业。 按照国际行业分类标准来…

医药产品经理ims数据分析

如果说某个药品的销售额在对比去年同月下降40%&#xff0c;而你身为该药品的产品经理是否能快速找出其原因&#xff1f;这是医药产品经理、医药市场bd对于数据异动分析的考题&#xff0c;侧面反映了医药行业数据分析对于医药产品经理这个职位的重要性。 说到医药行业数据分析先…

数据分析案例-大数据相关招聘岗位可视化分析

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

医药销售数据分析

阅读原文 一、数据源 来自某医药公司的产品销售数据&#xff0c;时间为 3 月到 5 月&#xff0c;共 48 个 Excel 表格。包含订单信息、售后信息、用户信息以及对应销售人员信息等。 加载合并后得到的原始数据如下&#xff1a; 二、数据清洗 清洗流程以及对应细节 加载数据源 …

【Python数据分析】——药品销售数据分析(完整项目实战)

一、前言 这篇文章找来了有关药品销售数据进行案例分析练习&#xff0c;利用适当的统计方法对相关数据进行月均消费次数、月均消费金额、客单价和消费趋势等几个业务指标进行分析。 分析过程为&#xff1a;数据获取、数据清洗、建模分析、可视化 二、数据获取 &#xff08;…

奇瑞汽车回应要求员工周六上班:本意不是压榨员工;Google发布史上最大通才模型PaLM-E;Chrome 111发布|极客头条

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&…

ChatGPT和知识图谱视频笔记

目录 Prompt tuing Instruction-tuning 知识图谱 prompting tuning未对模型参数进行更新&#xff0c; Fine tuning和Instruction tuning都对模型参数进行了更新 Prompt tuing prompt简单理解就是提问的问题 Instruction-tuning 知识图谱

新浪股票接口获取历史数据

这两天做了一个调用新浪股票接口获取实时以及历史股票数据的应用&#xff0c;因为新浪没有公开关于其接口的官方文档&#xff0c;所以通过各种百度差了很多关于新浪股票接口的使用&#xff0c;不过大家基本都是转载或者直接复制&#xff0c;对于实时数据的获取讲的很详细&#…

ChatGPT爆火之下,最有料如何赋能企业数字化升级

随着数字技术的飞速发展&#xff0c;人们的生活逐渐被数字技术所渗透。从智能家居到智能手机&#xff0c;从智能交通到智能医疗&#xff0c;数字技术已经成为了我们生活中不可或缺的一部分。最近火爆的ChatGPT就是一个很好的例子&#xff0c;作为新兴的数字技术&#xff0c;不仅…

硬件预算最高直降46倍!低成本上手AIGC和千亿大模型,一行代码自动并行,Colossal-AI再升级

最近&#xff0c;AI大模型连续火爆出圈&#xff0c;人工智能生成模型&#xff08;AIGC&#xff09;的热度尚未褪去&#xff0c;聊天机器人ChatGPT便引发全网热议&#xff0c;两周吸引百万用户。还有卷趴一半程序员的AlphaCode&#xff0c;生成全新蛋白质的ESM2等&#xff0c;不…