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制作的20种loading动效
Jul 05 HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
Mar 15 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
Aug 28 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
CSS实现多个元素在盒子内两端对齐效果
Mar 30 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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学习资料汇总与网址
2007/03/16 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
深入PHP curl参数的详解
2013/06/17 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
python装饰器使用方法实例
2013/11/21 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
对python的文件内注释 help注释方法
2018/05/23 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
python实现扫雷游戏
2020/03/03 Python
学python最电脑配置有要求么
2020/07/05 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
是否有自动比较结构的方法
2015/06/03 面试题
运动会广播稿60字
2014/01/15 职场文书
上班打牌检讨书
2014/02/07 职场文书
环境整治工作方案
2014/05/18 职场文书
启动仪式策划方案
2014/06/14 职场文书
公证书
2019/04/17 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
python基于turtle绘制几何图形
2021/06/15 Python