h5如何实现记住密码功能


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来h5如何实现记住密码功能,h5实现记住密码功能的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

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

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

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

<!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>

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

HTML的table鼠标拖拽排序该如何实现

怎样解决各种ie6-ie10的兼容问题

html怎样在消息按钮上增加数量角标

以上就是h5如何实现记住密码功能的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

h5的头部meta标签如何使用

HTML5实践-如何使用css3丰富图片样式的详解(二)

HTML5动画有什么用?

HTML5多媒体audio和video详细介绍(一)

如何使用HTML5实现地理位置的获取

HTML5中返回当前音频/视频的url的属性currentsrc

html中的title是什么意思?

具体介绍HTML5表单新增属性

HTML5支持所有音频格式吗

HTML5生成柱状图(条形图)效果的实例代码

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...