localsStorage以对象格式存储用户名并记住用户名

最新推荐文章于 2023-02-08 23:42:37 发布

zn来日放长

最新推荐文章于 2023-02-08 23:42:37 发布

阅读量598

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44451266/article/details/89855486

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

将用户名和密码构造成对象的格式, 存入localsStorage中, 类似这样的格式{usermae:‘admin’,pwd:‘123456’}

		 // 获取元素
  	   var username = document.querySelector('#username');
   	   var pwd = document.querySelector('#pwd');
   	   var remember = document.querySelector('#remember');
    // 因为写入的时候使用的userInfo, 所以获取的时候,使用userInfo来获取
    if (localStorage.getItem('userInfo')) {
        // 将localStorage中存储的username填充到input框中
        var str = localStorage.getItem('userInfo');
        // 将本地存储中的字符串,转换成对象: '{username:username.value,pwd:pwd.value}'
        var obj=JSON.parse(str);
        // 自动填充表单元素
        username.value=obj.username;
        pwd.value=obj.pwd;
        // 勾选复选框
        remember.checked = true;
    }
    //change事件一般是注册给表单元素;change监听的是value是否发生改变
    remember.addEventListener('change', function() {
        // 如果复选框是勾选状态, 就将用户输入的username存储到localStorage中
        if (this.checked==true) {
            // 重新获取表单元素的value
            var obj={username:username.value,pwd:pwd.value};
            // 重复写入:写入的时候使用的叫做userInfo: '{username:username.value,pwd:pwd.value}'
            localStorage.setItem('userInfo', JSON.stringify(obj))
        } else {    //否则从localStorage中删除已经存储的username
            localStorage.removeItem('userInfo');
            // username.value='';
            // pwd.value=''
        }
    })