html5超简单的localStorage实现记住密码的功能实现


Posted in HTML / CSS onSeptember 07, 2017

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

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

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

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

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

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

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

html5超简单的localStorage实现记住密码的功能实现

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<style type="text/css">
    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;
    }
</style>
<body>
    <form action="" method="" onsubmit="return loginBtn_click();">
        <h3>Log in</h3>
        <input type="text" name="user" placeholder="user" id="user">
        <input type="password" name="pass" placeholder="password" id="pass">
        <input type="checkbox" id="remember" checked><br/><br/>
        <input type="submit" id="sub">
    </form>
</body>
<script type="text/javascript">
    $(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');
            }
        }
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 #HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
Aug 28 #HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 #HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 #HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
Aug 24 #HTML / CSS
HTML5中的拖放实现详解
Aug 23 #HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 #HTML / CSS
You might like
PHP+DBM的同学录程序(1)
2006/10/09 PHP
PHP 函数执行效率的小比较
2010/10/17 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
PHP编程风格规范分享
2014/01/15 PHP
php 邮件发送问题解决
2014/03/22 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
对javascript继承的理解
2016/10/11 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
python实现telnet客户端的方法
2015/04/15 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
Python发展简史 Python来历
2019/05/14 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
浪费资源的建议书
2014/03/12 职场文书
岗位竞聘书范文
2014/03/31 职场文书
大学生交通专业求职信
2014/09/01 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
大学生自荐材料范文
2014/12/30 职场文书
大学教师个人总结
2015/02/10 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
oracle表分区的概念及操作
2021/04/24 Oracle