使用HTML5中的localStorage实现记住密码功能

这篇文章主要介绍了html5超简单的localstorage实现记住密码的功能实现,非常具有实用价值,需要的朋友可以参考下

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

localStorage – 没有时间限制的数据存储

sessionStorage – 针对一个 session 的数据存储

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

立即学习“前端免费学习笔记(深入)”;

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

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

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

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

使用HTML5中的localStorage实现记住密码功能

nbsp;html>                form{        width: 300px;        padding: 10px 0px 20px 30px;        height:auto;        border-radius: 6px;        border-left:8px solid #19a049;        background:#eee;        margin:100px auto;    }    #user,#pass{        padding: 8px;        outline: none;        background: transparent;        border:1px solid #999;        margin-top: 5px;    }    #sub{        padding: 6px;        outline: none;        border:none;        background: #19a049;        color:#fff;        width: 150px;        border-radius: 6px;        cursor: pointer;    }    

登录后复制 $(document).ready(function(){ var strName = localStorage.getItem('keyName'); var strPass = localStorage.getItem('keyPass'); if(strName){ $('#user').val(strName); }if(strPass){ $('#pass').val(strPass); } }); function loginBtn_click(){ var strName = $('#user').val(); var strPass = $('#pass').val(); localStorage.setItem('keyName',strName); if($('#remember').is(':checked')){ localStorage.setItem('keyPass',strPass); }else{ localStorage.removeItem('keyPass'); } }

以上就是使用HTML5中的localStorage实现记住密码功能的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2909671.html

(0)
上一篇 2025年3月11日 04:24:17
下一篇 2025年2月25日 20:16:04

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论