2022.05.10
记住用户名.png

需求

如果勾选记住用户名，下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名

案例分析

1.把数据存起来，用到本地存储
2.关闭页面，也可以显示用户名，所以用到localStorage
3.打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并勾选复选框
4.当复选框发生改变的时候change事件
5.如果勾选就存储，否则就移除

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>记住用户名案例</title>
  8. </head>
  9. <body>
  10.     <input type="text" id="uname"><input type="checkbox" id="remember">记住用户名
  11.     <script>
  12.         var uname = document.querySelector('#uname');
  13.         var remember = document.querySelector('#remember');
  14.         if(localStorage.getItem('uname')){
  15.             uname.value = localStorage.getItem('uname');
  16.         }
  17.         remember.addEventListener('change',function(){
  18.             if(this.checked){
  19.                 localStorage.setItem('uname',uname.value);
  20.             }else{
  21.                 localStorage.removeItem('uname');
  22.             }
  23.         });
  24.     </script>
  25. </body>
  26. </html>

.