问题描述:通过JavaScript实现点击复选框将用户名存储到本地中,再次打开页面,输入框中自动输入上次保存的数据。
<body> <label for="">用户名</label> <input type="text1" name="" id="user" placeholder="请输入用户名"> <input type="checkbox" name="" id="cbx">记住用户名 <script> var cbx = document.querySelector('#cbx'); var user = document.querySelector('#user'); if (localStorage.getItem('user') != '') { var a = localStorage.getItem('user') user.value = a; cbx.checked = true; } // 通过本地存储将数据永久存储(操作复选框,进行勾选) // 当发生改变的的时候 cbx.onchange = function () { if (this.checked && user.value != '') { localStorage.setItem('user', user.value); } else { // 当checked值为false时,将数据清除 localStorage.removeItem('user'); user.value = '' } } // 再次打开页面。判断本地是否有用户名,有的话自动填入输入框,并将按钮勾选 if (localStorage.getItem('user')) { user.value = localStorage.getItem('user'); cbx.checked = true; } else { user.value = ''; cbx.checked = false; } </script> </body>
运行效果: