js操作cookie实现记住密码功能

最新推荐文章于 2024-06-28 16:59:20 发布
最新推荐文章于 2024-06-28 16:59:20 发布
阅读量1.9k 收藏 4
点赞数
分类专栏： front-end_jQuery 
<script language="javascript" type="text/javascript">  
function checkInCorrect()      //判断用户名和密码是否为空 
{ 
     if (document.getElementById('txtUserName').value=="") 
   { 
    alert('请输入用户名！') 
    document.getElementById('txtUserName').focus(); 
    return false 
   } 
   if (document.getElementById('txtPassword').value=="") 
   { 
    alert('请输入密码！') 
    document.getElementById('txtPassword').focus(); 
    return false 
   } 
   else 
   { 
    saveInfo(); 
    return true; 
   } 
} 
  
  
saveInfo = function(){ 
try{ 
   var isSave = document.getElementById('chkRememberPwd').checked;   //保存按键是否选中 
   if (isSave) { 
    var usernm = document.getElementById('txtUserName').value; 
    var userpsw = document.getElementById('txtPassword').value; 
    if(usernm!="" && userpsw!=""){ 
     SetCookie(usernm,userpsw); 
    } 
   }else {   
    SetCookie("",""); 
   } 
}catch(e){ 
  
} 
} 
  
function SetCookie(usern,psw){ 
var Then = new Date()  
Then.setTime(Then.getTime() + 1866240000000)  
document.cookie ="username=" + usern + "%%"+psw+";expires="+ Then.toGMTString() ; 
} 
  
  
function GetCookie(){  
var nmpsd; 
var nm; 
var psd; 
var cookieString = new String(document.cookie) 
var cookieHeader = "username=" 
var beginPosition = cookieString.indexOf(cookieHeader) 
cookieString = cookieString.substring(beginPosition); 
var ends=cookieString.indexOf(";"); 
if (ends!=-1){ 
   cookieString = cookieString.substring(0,ends); 
} 
if (beginPosition>-1){ 
   nmpsd = cookieString.substring(cookieHeader.length); 
   if (nmpsd!=""){ 
    beginPosition = nmpsd.indexOf("%%"); 
    nm=nmpsd.substring(0,beginPosition); 
    psd=nmpsd.substring(beginPosition+2); 
    document.getElementById('txtUserName').value=nm; 
    document.getElementById('txtPassword').value=psd; 
    if(nm!="" && psd!=""){ 
     document.forms[0].checkbox.checked = true 
    } 
   }  
} 
} 
</script>  
</head>  
<body onLoad="document.getElementById('txtUserName').focus();GetCookie();"> 
<form> 
    用户名:<input type="text" ID="txtUserName" οnblur="GetPwdAndChk()">  
    密  码:<input type="password" ID="txtPassword">  
    <input type="checkbox" ID="chkRememberPwd" />记住密码  
    <input type="button" OnClick="checkInCorrect()" value="进入"/>  
</form>    
</body>

未具名
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
document.cookie
weixin_51747462的博客
04-10 9519
document.cookie
【网络知识补习】❄️| Cookie详解 和 Document.cookie使用文档+运行实例
热门推荐
努力前行，总会成为自己心中的那道光
07-17 2万+
Cookie详解 什么是 Cookie？ Cookie 是一些数据, 存储于你电脑上的文本文件中。 当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。 Cookie 的作用就是用于解决 “如何记录客户端的用户信息”: 当用户访问 web 页面时，他的名字可以记录在 cookie 中。 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。 Cookie 以名/值对形式存储，如下所示: username=John Doe 当浏览器从服务器上请求 web
操作document.cookie存储和读取Cookies
最新发布
微赚淘客系统开发者博客
06-28 376
在Web开发中，Cookies（Cookie）是一种在客户端存储信息的方式，它允许网站在用户的计算机上存储少量数据，并在需要时进行读取。Cookies通常用于记录用户的状态信息、会话信息或其他用户相关的信息。对象来操作Cookies，包括设置、读取和删除Cookie的方法，并提供了相应的示例代码。通过掌握Cookies的基本操作，开发者能够更好地利用Cookies来存储和管理客户端的信息，从而提升Web应用的用户体验和功能性。返回的是一个包含所有Cookie的字符串，格式为键值对的形式，以分号和空格分隔。
document.cookie无法获取到cookie
前端踩坑之路
07-29 7118
背景 在前后端联调的时候，后端需要在入参中传入 cookie。于是想通过 document.cookie 来获取，但是发现浏览器有 cookie 但是无法获取到。 场景复现 打开谷歌调试工具，可以看到浏览器中是有记录 cookie 的； 在控制台执行 documen.cookie 发现获取不到 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qrm2NS3T-1627532987813)(https://raw.githubusercontent.com/AprilTong/
关于document.cookie的使用(转)
weixin_33881041的博客
12-22 1054
关于document.cookie的使用 ...
使用document对象操作cookie
weixin_30654419的博客
10-24 538
1. 使用document对象的cookie属性，可以让你读取、添加和更新文档（当期HTML）所关联的cookie。 2. 当你读取document.cookie时，会得到当期文档的所有cookie。 3. cookie的形式是如"name=value"的名值对。 4. 如果存在多个cookie一起返回，使用 ; 隔开。“name1=value1;name2=value2”。 所以对于添加...
document cookie用法
T_ravelers的博客
06-21 4589
cookie概述 曾经利用一个不变的框架来存储购物栏数据，而商品显示页面是不断变化的，尽管这样能达到一个模拟 全局变量的功能，但并不严谨。例如在导航框架页面内右击，单击快捷菜单中的【刷新】命令，则所有的JavaScript变量都会丢失。因此，要实现严格的 跨页面全局变量，这种方式是不行的， JavaScript中的另一个机制：cookie，则可以达到真正全局变量的要求。   cookie是浏
JS cookie的设置、读取和删除
to_prototy的博客
08-17 1万+
Javascript cookie的设置、读取和删除
JavaScript操作cookie实现记住用户名密码功能（一）
hsx18787462705的博客
09-15 4070
JavaScript操作cookie实现记住用户名密码功能（一） 由来简述 最近一段时间在使用springboot编写一个简单的小系统，但是写到登录注册时，突然想给登录加上一点小功能，但是写的时候有点模糊，然后向w3school求助了一下，之后自己有在那基础上有一些改动，达到了一个很好的样例，如果觉得好的给个关注，给个赞。 参考链接：https://www.w3school.com.cn/js/js_cookies.asp 主要实现了如下的一些功能： 1、页面加载完检测是否有cookie，有的话，把co
js案例，如何实现登录界面中选择记住密码和自动登录选项的存储数据？
csgojingyu的博客
09-21 397
如有其他需求，请各位自己完善。
纯js实现记住密码
qq_41675930的博客
12-30 625
如何实现纯js实现记住密码
无法通过document.cookie获取到cookie，但是却可以在控制台看到。
m0_72436362的博客
06-26 2237
该cookie是从后端设置的，所以为了安全问题，设为了true，但也带来了一个问题，无法通过js脚本来获取该cookie，只能看得到，但是你获取不到。但是虽然设置了httponly为true，网络请求还是可以正常携带发送的，因为这个属性本质上就是为了防止一些脚本和xss攻击的。setcookie 第七个属性就是设置 httponly 的，设置后无法通过 js 脚本获取。刚刚发现的一个问题，发现document.cookie无法获取到某些cookie。
VUE基于‘js-cookie‘和jsencrypt实现记住密码功能【前后端分离】
an715396887的博客
08-09 303
存储用户密码，为了安全需要加密，获取密码解密。所以我们安装依赖’jsencrypt’。记住密码，我们通过cookie来实现，先安装依赖 ‘js-cookie’
JS实现记住用户密码
jakelihua
12-06 2610
本文讲解如何使用JS实现我们常见的记住密码的功能。
cookie基本操作
qq_45648136的博客
03-16 2118
HTTP:超文本传输协议，用于从web服务器传输超文本到本地浏览器的传输协议，它是一个无状态的协议。 cookie ∶是指缓存在本地客户端的数据 1.cookie的基本操作 cookie基本操作包括增、删、改、查四个部分 （1）查询 // 查询cookie console.log(document.cookie) // 设置cookie document.cookie="username=hello" 效果： （2）增 // 设置cookieusername和时间 var odate=new Dat
JavaScript之document.cookie使用总结
JavaCrazyer的ItEye(codewu.com)技术博客
08-27 210
    “某些 Web 站点在您的硬盘上用很小的文本文件存储了一些信息，这些文件就称为 Cookie。”—— MSIE 帮助。一般来说，Cookies 是 CGI 或类似，比 HTML 高级的文件、程序等创建的，但是 javascript 也提供了对 Cookies 的很全面的访问权利。       每个 Cookie 都是这样的：&lt;cookie名&gt;=&lt;值&gt;　　&lt;c...
js 实现记住密码功能
小二丶的博客
04-27 1257
这么多资源 给个赞 关注一下
解决document.cookie无法获取到cookie问题
HenryXiao的博客
04-27 1万+
一、前言 在进行前后端联调的时候，由于想实现一个登出操作，前端自动删除浏览器存储的cookie，想通过document.cookie来获取进而进行删除操作，但是发现浏览器有cookie；但是无法获取到情况遂记录 二、场景复现 首先登录后，浏览器中是有记录cookie的，如图 然后我代码层执行documen.cookie发现获取不到，浏览器控制台也同样 后面去研究了一下application中存放的cookies的属性内容，发现有个属性HttpOnly是选中状态，这个状态是由于后端设置cookie的时候
ant-design-vue实现记住密码功能代码
06-06
在 Vue.js 应用程序中实现记住密码功能需要使用一些技术，如 Cookie、localStorage 或 Vuex。这里提供了一个使用 Cookie 实现记住密码功能的示例代码： 1. 在登录页的表单中添加一个“记住密码”的勾选框： ```html <template> <div> <input type="text" v-model="username" placeholder="用户名"> <input type="password" v-model="password" placeholder="密码"> <label><input type="checkbox" v-model="remember">记住密码</label> <button @click="login">登录</button> </div> </template> ``` 2. 在登录方法中判断是否勾选了“记住密码”，如果勾选了，将用户名和密码保存在 Cookie 中： ```js <script> import Cookies from 'js-cookie' export default { data() { return { username: '', password: '', remember: false } }, methods: { login() { // 发送登录请求，验证用户名和密码 // ... if (this.remember) { Cookies.set('username', this.username) Cookies.set('password', this.password) } } } } </script> ``` 3. 在应用程序的入口处读取 Cookie，如果存在 Cookie，则自动填充表单： ```js <script> import Cookies from 'js-cookie' export default { created() { const username = Cookies.get('username') const password = Cookies.get('password') if (username && password) { this.username = username this.password = password this.remember = true // 自动登录 this.login() } } } </script> ``` 在这个示例中，我们使用了 js-cookie 库来读写 Cookie。如果您使用的是 localStorage 或 Vuex，可以使用相应的 API 来读写数据。并且需要注意，如何保护用户的敏感信息，比如使用加密技术来保护用户的密码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值