jQuery网站记住用户名和密码（但是不建议保存密码到本地不安全）

优速盾-小U • 2023年10月23日 21:02 • 网站百科 • 阅读 412

记住密码是每个有帐号登录的网站必备的，但是有时候还是不安全的。

1、localStorage实现保存密码用户名

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。localStorage 属性是只读的。

localStorage.setItem("name", name); localStorage.setItem("password", password);

2、sessionStorage 实现保存密码用户名

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性，该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。

sessionStorage.setItem("name", name); sessionStorage.setItem("password", password);

3、实际的demo

<!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>记住用户密码</title> <link href="layui/css/layui.css" rel="stylesheet" /> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> </head> <body> <div class="layui-main"> <div class="layui-form-item"> <label class="layui-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名</label> <div class="layui-inline"> <input id="name"> </div> </div> <label class="layui-form-label">密码</label> <div class="layui-inline"> <input id="password" type="password"> </div> <br> <div style="margin-top: 10px;"><input type="checkbox" οnclick="check()" id="check1"/>记住密码</div> <div class="layui-form-item"> <label class="layui-form-label"></label> <div class="layui-input-inline"> <button type="button" class="layui-btn " onclick="get()">提交</button> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ //页面加载完 获取是否选中记住密码 var ck = localStorage.getItem("ck"); if(ck){ var name = localStorage.getItem("name"); var password = localStorage.getItem("password"); $("#name").val(name); $("#password").val(password); $("#check1").prop("checked",true); //document.getElementById("check1").checked = true; } }) function get(){ //获取是否选中记住密码 var ck = document.getElementById("check1").checked; //获取输入的用户名 var name = $("#name").val(); //获取输入的密码 var password = $("#password").val(); if(ck){ localStorage.setItem("name", name); localStorage.setItem("password", password); sessionStorage.setItem("name", name); sessionStorage.setItem("password", password); //$.cookie('name1', name, { expires: 7 }); //$.cookie('password1', password, { expires: 7 }); //保存是否记住密码状态 localStorage.setItem("ck", ck); } } function check(){ } </script> </body> </html>