用localStorage实现记住密码的功能


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

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

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

<!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中文网其它相关文章!

推荐阅读:

H5怎么操作WebSQL数据库

H5的Canvas做出圆形进度条并显示数字百分比

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

相关阅读 >>

nw.js的localStorage的物理储存实例详解

h5的定时器怎样实现进度条功能

localStorage和sessionstorage使用记录

html5的存储方式sessionstorage和localStorage详解

localStorage与sessionstorage该如何使用

html5文件异步上传功能的实现

怎样用h5添加禁止缩放功能

怎么用css设置记录用户密码

dreamweaver表单设置6位数密码实现方法

h5的页面中怎样调用app功能

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




打赏

取消

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

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

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

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

评论

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