使用HTML5中的localStorage实现记住密码功能


本文摘自PHP中文网,作者巴扎黑,侵删。

这篇文章主要介绍了html5超简单的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

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>

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

相关阅读 >>

如何自定义video播放器样式?

html5的深入了解

html5 video视频字幕的使用和制作方法

h5有哪些清空画布方法

可替换元素是什么?(附示例)

html5返回音频/视频是否已结束的属性ended

zip压缩和解压技术在html5中的应用的代码案例(图)

html5实现对话气泡点击动画

html5 新表单元素

html5 如何做到application cache?离线储存技术的简要说明

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




打赏

取消

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

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

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

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

评论

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