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仿造window7的开始菜单
Jun 17 HTML / CSS
CSS3之多背景background使用示例
Oct 18 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
会走动的图形html5时钟示例
Apr 27 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 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 程式大小
2006/12/06 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
快速掌握jQuery插件WebUploader文件上传
2016/11/07 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
如何将python中的List转化成dictionary
2016/08/15 Python
python实现八大排序算法(1)
2017/09/14 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
业务助理岗位职责
2013/11/18 职场文书
师范生见习报告
2014/10/31 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
党委工作总结2015
2015/04/27 职场文书
教师节主题班会教案
2015/08/17 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android