本地存储-记住用户名

Posted 2021-03-03 rainbowupdate

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

1.把数据存起来，用到本地存储

2.关闭页面，也可以显示用户名，所以用到localStorage

3.打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框

4.当复选框发生改变的时候change事件

5.如果勾选，就存储，否则就移除

  <input type="text" id="username"><input type="checkbox" name="" id="ischeck">

 var username = document.querySelector(‘#username‘)
        var ischeck = document.querySelector(‘#ischeck‘)
        if (localStorage.getItem(‘username‘)) {
            username.value = localStorage.getItem(‘username‘)
        }
        ischeck.addEventListener(‘change‘, function() {
            if (ischeck.checked) {
                localStorage.setItem(‘username‘, username.value)
            } else {
                localStorage.removeItem(‘username‘)
            }
        })