js案例:记住用户名

m0_63400611

已于 2022-05-18 16:09:28 修改

阅读量139

点赞数

分类专栏： js 文章标签： LocalStorage 前端开发 JavaScript 数据存储用户交互

于 2022-03-08 14:16:36 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/123352472

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

分析

用本地存储把数据存起来,使用LocalStorage关闭页面也可以显示用户名
打开页面先判断是否有这个用户名,如果有就在表单里显示用户名,并且勾选复选框
当复选框发生改变的时候触发change事件,如果勾选就存储,否则移除存储的数据

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="username">
    <input type="checkbox" name="" id="remember">记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');

        if(localStorage.getItem('username')) {
            username.value = localStorage.getItem('username');
            remember.checked = true;
        }

        remember.addEventListener('change', function() {
            if(this.checked) {
                localStorage.setItem('username', username.value);
            } else {
                localStorage.removeItem('username');
            }
        })
    </script>
</body>
</html>