您现在的位置是:首页 >程序人生 >WEB前端

利用HTML5的localStorage实现记住密码

发布时间:2019-03-12 编辑:jielin 浏览:10324 评论:0

    1、首先在这里普及一下localStorage

    localStorage是HTML5提供的一种在客户端存储数据的新方法,之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。并且localStorage 方法存储的数据没有时间限制,第二天、第二周或下一年之后,数据依然可用。

    2、那怎么使用呢?往下看这个小案例:

    html代码:

    账号:<input type="text" id="user">

    密码:<input type="password" id="pwd">

    记住密码:<input type="checkbox" id="remember">

    <button id="btn">登录</button>

    js代码:

    // 先获取对应的dom节点

    var user = document.getElementById('user');
    var pass = document.getElementById('pwd');        
    var check = document.getElementById('remember');
    var btn = document.getElementById('btn');

    // 获取到user的值并保存

    var localUser = localStorage.getItem('user') || '';
    user.value = localUser;

    //获取到pwd的值并保存

    var localPass = localStorage.getItem('pass') || '';
    pass.value = localPass; 

     

    // 如果localUser和localPass都不为空,说明数据已经存储到了本地,设置按钮为选中状态

    if (localUser !== ' ' && localPass !== ' ') {      
          check.setAttribute('checked', ' ');    

    // 绑定点击按钮

    btn.onclick = function() {

    // 如果选中就存储信息,否则就清空信息
        if (check.checked){        
            localStorage.setItem('user', user.value);        
            localStorage.setItem('pass', pass.value);      
         } else {        
            localStorage.setItem('user', ' ');        
            localStorage.setItem('pass', ' ');      
         }    
    }

     

    3、以下是完整的HTML代码

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>记住密码</title>

    <script type="text/javascript" src="js/jquery.js"></script>

    </head>

    <body>

    账号:<input type="text" id="user">密码:<input type="password" id="pwd">记住密码:<input type="checkbox" id="remember">

    <button id="btn">登录</button>

    </body>

    <script type="text/javascript">

        var user = document.getElementById('user');

        var pass = document.getElementById('pwd');

       var check = document.getElementById('remember');

       var btn = document.getElementById("btn");

       var localUser = localStorage.getItem('user') || ''; //获取到user的值并保存

       var localPass = localStorage.getItem('pass') || ''; //获取到pwd的值并保存

       user.value = localUser;

       pass.value = localPass;

     

       if (localUser !== '' && localPass !== '') {

         check.setAttribute('checked', '');

       }

     

      btn.onclick = function () {

      if (check.checked) {

         localStorage.setItem('user', user.value);

        localStorage.setItem('pass', pass.value);

      } else {

        localStorage.setItem('user', '');

        localStorage.setItem('pass', '');

     }

    }

    </script>

    </html>

    是不是超级简单呢?