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 border实现图片遮罩效果代码
Apr 09 HTML / CSS
在css3中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 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三层结构(上) 简单三层结构
2010/07/04 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python清除函数占用的内存方法
2018/06/25 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
pandas的相关系数与协方差实例
2019/12/27 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
单位未婚证明范本
2014/01/18 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
电信营业员岗位职责
2015/04/14 职场文书
建国大业观后感600字
2015/06/01 职场文书
团干部培训班心得体会
2016/01/06 职场文书
思想品德课教学反思
2016/02/24 职场文书
Python常遇到的错误和异常
2021/11/02 Python
Python中的tkinter库简单案例详解
2022/01/22 Python