HTML5에서 localStorage를 사용하여 비밀번호 기억 기능 구현-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5에서 localStorage를 사용하여 비밀번호 기억 기능 구현

巴扎黑

Sep 09, 2017 am 11:51 AM

html5 localstorage 성취하다

이 문서에서는 주로 HTML5의 매우 간단한 비밀번호 기억 기능 구현을 소개합니다. 도움이 필요한 친구가 참조할 수 있습니다.

HTML5는 클라이언트에 데이터를 저장하는 두 가지 새로운 방법을 제공합니다. localStorage - 시간 제한 없는 데이터 저장

sessionStorage - 세션용 데이터 저장
이전에는 이러한 작업이 모두 쿠키에 의해 수행되었습니다. 그러나 쿠키는 요청이 있을 때마다 서버에 전달되므로 쿠키가 느리고 비효율적이므로 대량의 데이터를 저장하는 데 적합하지 않습니다.

웹사이트마다 데이터는 서로 다른 영역에 저장되며 웹사이트는 자체 데이터에만 액세스할 수 있습니다.

HTML5는 JavaScript를 사용하여 데이터를 저장하고 액세스합니다.

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(&#39;keyName&#39;);
        var strPass = localStorage.getItem(&#39;keyPass&#39;);
        if(strName){
            $(&#39;#user&#39;).val(strName);
        }if(strPass){
            $(&#39;#pass&#39;).val(strPass);
        }

    });

    function loginBtn_click(){
            var strName = $(&#39;#user&#39;).val();
            var strPass = $(&#39;#pass&#39;).val();
            localStorage.setItem(&#39;keyName&#39;,strName);
            if($(&#39;#remember&#39;).is(&#39;:checked&#39;)){
                localStorage.setItem(&#39;keyPass&#39;,strPass);
            }else{
                localStorage.removeItem(&#39;keyPass&#39;);
            }
        }
</script>
</html>

로그인 후 복사

위 내용은 HTML5에서 localStorage를 사용하여 비밀번호 기억 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.