记住密码

最新推荐文章于 2021-05-13 17:55:24 发布

翻译最新推荐文章于 2021-05-13 17:55:24 发布 · 300 阅读

前端js 专栏收录该内容

39 篇文章

订阅专栏

本文通过一个简单的HTML页面示例，介绍了如何利用localStorage来存储用户的登录信息，并在下次访问时自动填充这些信息，以实现自动登录的功能。

分享一段代码实例，它简单演示了localStorage的使用。

代码实例如下:

 
  
   
    
        
         01
        
        
         02
        
        
         03
        
        
         04
        
        
         05
        
        
         06
        
        
         07
        
        
         08
        
        
         09
        
        
         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
        
        
         
          <!doctype html>
         
         
          <
          html
          >
         
         
          <
          head
          >
         
         
          <
          meta 
          charset
          =
          "utf-8"
          >
         
         
          <
          title
          >记住密码</
          title
          >
         
         
          <
          script 
          src
          =
          "http://libs.baidu.com/jquery/1.9.0/jquery.js"
          ></
          script
          >
         
         
          </
          head
          >
         
         
          <
          body
          >
         
         
          用户名<
          input 
          type
          =
          "text" 
          id
          =
          "ursename"
          > <
          br
          >
         
         
          密码  <
          input 
          type
          =
          "text" 
          id
          =
          "password"
          > <
          br
          >
         
         
          <
          input 
          id
          =
          "chk" 
          type
          =
          "checkbox"
          >
         
         
          <
          lable 
          for
          =
          "chk"
          >自动登录</
          lable
          >
         
         
          <
          script
          >
         
         
          //localStorage.getItem('')获取要存储的值
         
         
          $('#chk').click(function() {
         
         
              
          if (this.checked) {
         
         
                
          //将值存储在本地
         
         
                
          localStorage.setItem('names', $("#ursename").val());
         
         
                
          localStorage.setItem(('pass'), $('#password').val());
         
         
                
          //                           alert(localStorage.getItem('names'));
         
         
                
          //                           alert(localStorage.getItem('pass'))
         
         
              
          } else {
         
         
                
          //在本地删除存储
         
         
                
          localStorage.removeItem('names');
         
         
                
          localStorage.removeItem('pass');
         
         
                
          // console.log(localStorage.getItem('names'))
         
         
              
          }
         
         
            
          })
         
         
            
          //判断是否有存储值如果有的话取出存储的值
         
         
          if (localStorage.getItem('names') && localStorage.getItem('pass')) {
         
         
            
          $('#ursename').val(localStorage.getItem('names'));
         
         
            
          $('#password').val(localStorage.getItem('pass'));
         
         
            
          $('#chk').prop("checked", true);
         
         
          }
         
         
          </
          script
          >
         
         
          </
          body
          >
         
         
          </
          html
          >