JS操作保存cookie(转载他人)
2019独角兽企业重金招聘Python工程师标准>>>
网上借鉴了一些朋友的经验,做了一个小例子,js操作cookie,实现登录密码保存。cookie的存放方式是以键值对的方式保存的。
通常cookie和session,是web开发中用于存储信息的对象,session存在于服务器的内存中,而cookie则是存在客户端,所以js可以直接操作cookie进行信息的存储和读取。
js存放cookie一般的写法,如:document.cookie="userName=admin";,如果是多个键值对:document.cookie="userName=admin; userPass=123";
下面是js操作cookie保存用户的登录信息:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function addCookie(name,value,days,path){ /**添加设置cookie**/ var name = escape(name); var value = escape(value); var expires = new Date(); expires.setTime(expires.getTime() + days * 3600000 * 24); //path=/,表示cookie能在整个网站下使用,path=/temp,表示cookie只能在temp目录下使用 path = path == "" ? "" : ";path=" + path; //GMT(Greenwich Mean Time)是格林尼治平时,现在的标准时间,协调世界时是UTC //参数days只能是数字型 var _expires = (typeof days) == "string" ? "" : ";expires=" + expires.toUTCString(); document.cookie = name + "=" + value + _expires + path;
}
function getCookieValue(name){ /**获取cookie的值,根据cookie的键获取值**/ //用处理字符串的方式查找到key对应value var name = escape(name); //读cookie属性,这将返回文档的所有cookie
//var allcookies = unescape(document.cookie); //中文解码var allcookies = document.cookie; //var allcookies = unescape(document.cookie);//中文解码 //查找名为name的cookie的开始位置 name += "="; var pos = allcookies.indexOf(name); //如果找到了具有该名字的cookie,那么提取并使用它的值 if (pos != -1){ //如果pos值为-1则说明搜索"version="失败 var start = pos + name.length; //cookie值开始的位置 var end = allcookies.indexOf(";",start); //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置 if (end == -1) end = allcookies.length; //如果end值为-1说明cookie列表里只有一个cookie var value = allcookies.substring(start,end); //提取cookie的值 return (value); //对它解码 }else{ //搜索失败,返回空字符串 return ""; }
}
function deleteCookie(name,path){ /**根据cookie的键,删除cookie,其实就是设置其失效**/ var name = escape(name); var expires = new Date(0); path = path == "" ? "" : ";path=" + path; document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path;
} /**实现功能,保存用户的登录信息到cookie中。当登录页面被打开时,就查询cookie**/
window.onload = function(){ var userNameValue = getCookieValue("userName"); document.getElementById("txtUserName").value = userNameValue; var userPassValue = getCookieValue("userPass"); document.getElementById("txtUserPass").value = userPassValue;
} function userLogin(){ /**用户登录,其中需要判断是否选择记住密码**/ //简单验证一下 var userName = document.getElementById("txtUserName").value; if(userName == ''){ alert("请输入用户名。"); return; } var userPass = document.getElementById("txtUserPass").value; if(userPass == ''){ alert("请输入密码。"); return; } var objChk = document.getElementById("chkRememberPass"); if(objChk.checked){ //添加cookie addCookie("userName",userName,7,"/"); addCookie("userPass",userPass,7,"/"); alert("记住了你的密码登录。"); window.location.href = "http://www.baidu.com"; }else{ alert("不记密码登录。"); window.location.href = "http://www.baidu.com"; }
}
</script>
</head>
<body>
<center> <table width="400px" height="180px" cellpadding="0" cellspacing="0" border="1" style="margin-top:100px;"> <tr> <td align="center" colspan="2">欢迎使用XXX管理系统</td> </tr> <tr> <td align="right"> <label>用户名:</label> </td> <td align="left"> <input type="text" id="txtUserName" name="txtUserName" style="width:160px; margin-left:10px;" /> </td> </tr> <tr> <td align="right"> <label>密 码:</label> </td> <td align="left"> <input type="password" id="txtUserPass" name="txtUserPass" style="width:160px; margin-left:10px;" /> </td> </tr> <tr> <td align="center" colspan="2"> <span style="font-size:12px; color:blue; vertical-align:middle;">是否记住密码</span> <input type="checkbox" id="chkRememberPass" name="chkRememberPass" style="vertical-align:middle;" /> </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" id="subLogin" name="subLogin" value="登 录" onclick="userLogin()"/> <input type="reset" id="resetLogin" name="resetLogin" value="重 置" /> </td> </tr> </table>
</center>
</body>
</html>
转载于:https://my.oschina.net/leonaLily/blog/395780
JS操作保存cookie(转载他人)相关推荐
- JS 操作cookie
平时网站的开发中cookie用的还是用的比较多的,因为cookie在客户端,所以用js操作的比较多,下面是常用的设置.查找.删除等功能实现. function addCookie(objName, o ...
- 【转载】常备JS操作
常备JS操作 转自:http://www.cfcodes.com/?ID=221 //事件源对象 event.srcElement.tagName event.srcElement.type //捕获 ...
- jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...
- js来读写cookie操作
因为之前公司的项目前后端是在一起的,因为要用vue来重构之前的项目.所以token签名要作为一个参数传递到后台.所以就遇到两个问题,1 token的保存和获取的问题. 2 token 判断.判断用户是 ...
- JS 无法清除Cookie的解决方法
项目中使用sdmenu.js时,需要在登录时清除Cookie,而sdmenu默认是会保存Cookie的 下面是sdmenu.js保存Cookie的方法 document.cookie = " ...
- JS操作Excel读取和写入(模板操作)
前一段时间一直在做报表,所以肯定会用到Excel的操作,但是在网上查阅资料有关JS操作excel较少,有的话,也都是老生常谈或很零碎的一些东西.本人是在实际项目中摸索出,JS读写Excel(模板)数据 ...
- js 操作select和option
2019独角兽企业重金招聘Python工程师标准>>> 1.动态创建selectfunction createSelect(){var mySelect = document.cre ...
- js中的cookie使用和vue-cookie的使用
在HTTP协议的定义中,采用了一种机制来记录客户端和服务器端交互的信息,这种机制被称为cookie,cookie规范定义了服务器和客户端交互信息的格式.生存期.使用范围.安全性. 在JavaScrip ...
- Android持久化保存cookie
在解析网页信息的时候,需要登录后才能访问,所以使用httpclient模拟登录,然后把cookie保存下来,以供下一次访问使用,这时就需要持久化cookie中的内容. 在之前先科普一下基础知识: 什么 ...
最新文章
- AI岗位面试屡战屡败?这份“翻盘秘籍”快收好!
- centos,yum安装时报错could not retrieve mirrorlist,resolve.conf配置,dns配置错误
- centos 6.5 配置LDAP服务器+客户端!
- 人生第一次手术:0806
- Deque(双向队列 c++模版实现 算法导论第三版第十章10.1-5题)
- 胡巴小年调皮搞事情?嗨翻五城华为体验店
- 2015.7.29 上学前在家的最后一晚
- Android 软键盘弹出时把原来布局顶上去的解决方法
- HTML- 锚点实例
- 基于JAVA+SQL Server数据库项目——学生校园卡管理系统(SSH框架)
- clover windows安装_记一次使用AMD安装macOS Catalina的经历
- python基础之列表函数(10)
- Ipad 连笔记本共享360wifi热点 总是断开 解决方法
- Delong test比较两个ROC曲线的性能
- 软件确认测试和验收测试有什么区别?
- Ghost的一些使用方法
- Transformer一文搞懂
- php 怎么获取网址,php如何获取当前网址/URL
- R语言入门——数据读写
- FL Studio水果软件好用吗?对电脑硬件环境有哪些需求