【JS缓存技术】-本地存储

最新推荐文章于 2026-02-21 03:28:17 发布

原创最新推荐文章于 2026-02-21 03:28:17 发布 · 622 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #缓存 #前端

JavaScript初级专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何利用JavaScript的localStorage API来实现在网页中记住用户名的功能。当用户勾选'记住用户名'选项时，输入的用户名会被存储到本地，下次打开页面时，表单会自动填充之前保存的用户名。通过示例代码展示了如何设置和清除localStorage中的数据。

JS缓存技术-本地存储

本地存储
window.sessionStorage
window.localStorage
- 记住用户名案例

本地存储

在这里插入图片描述

window.sessionStorage

在这里插入图片描述

用法示例：

在这里插入图片描述

window.localStorage

和sessionStorage语法一致,声明周期不同
在这里插入图片描述

记住用户名案例

在这里插入图片描述

如果我们勾选了记住用户名，那么输入的用户名数据将会被本地存储，下次打开此页面时表单中会直接显示此前存储的数据。否则，如果没有勾选，则会删除此前存储的用户名数据。

在这里插入图片描述
案例代码：

<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>