HTML5 로컬 저장소 애플리케이션 sessionStorage 및 localStorage-H5 튜토리얼-php.cn

HTML5 로컬 저장소 애플리케이션 sessionStorage 및 localStorage

大家讲道理

풀어 주다： 2017-08-19 14:13:40

원래의

2778명이 탐색했습니다.

HTML5 이전에는 브라우저가 일반적으로 쿠키를 사용하여 데이터를 저장했지만 쿠키에는 도메인 이름과 크기 제한이 있었습니다.

HTML5가 대중화된 이후에는 localStorage와 sessionStorage를 통해 브라우저 측의 데이터 저장이 가능해졌습니다. 기능은 어떻습니까?

sessionStorage
SessionStorage는 임시 세션입니다. 데이터 저장의 유효 기간은 페이지를 열 때부터 페이지를 닫을 때까지의 기간입니다. 닫으면 로컬 저장소가 사라집니다

localStorage

영구 저장소(데이터는 수동으로 삭제 가능)
저장소 한도(5M)
클라이언트에서 완료하고 서버 처리를 요청하지 않습니다
sessionStorage 데이터는 페이지 간에 공유할 수 없지만 localStorage는 페이지 간에 공유할 수 있습니다.

sessionStorage 애플리케이션:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var aInput = document.getElementsByTagName(&#39;input&#39;);
            aInput[0].onclick = function(){
                //sessionStorage: 临时存储, 只在当前页面有效,不能传递到其他页面,页面关闭之后消失
                window.sessionStorage.setItem("name", aInput[3].value );
            };
            aInput[1].onclick = function(){
                alert(window.sessionStorage.getItem("name" ));
            };
            aInput[2].onclick = function(){
                window.sessionStorage.removeItem("name" );
            };
        }
    </script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<br/>
<input type="text" />
</body>
</html>

로그인 후 복사

localStorage 애플리케이션

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var aInput = document.getElementsByTagName(&#39;input&#39;);
            aInput[0].onclick = function(){
                //localStorage : 永久性存储
                window.localStorage.setItem("name", aInput[3].value);
                window.localStorage.setItem("name2", &#39;aaaaa&#39;);
            };
            aInput[1].onclick = function(){
                alert( window.localStorage.getItem( "name" ) );
                alert( window.localStorage.getItem( "name2" ) );
            };
            aInput[2].onclick = function(){
                window.localStorage.removeItem("name");
//                window.localStorage.clear();
            };
        }
    </script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<br/>
<input type="text" />
</body>
</html>

로그인 후 복사

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function () {
            var aInput = document.getElementsByTagName("input");
            var oT = document.querySelector("textarea");

            if (window.localStorage.getItem("userName")) {
                aInput[0].value = window.localStorage.getItem("userName");
            }

            for (var i = 0; i < aInput.length; i++) {
                if (window.localStorage.getItem(&#39;sex&#39;) == aInput[i].value) {
                    aInput[i].checked = true;
                }
            }

            if (window.localStorage.getItem("note")) {
                oT.value = window.localStorage.getItem("note");
            }

            window.onunload = function () {
                if (aInput[0].value) {
                    window.localStorage.setItem("userName", aInput[0].value);
                }

                for (var i = 0; i < aInput.length; i++) {
                    if (aInput[i].checked == true) {
                        window.localStorage.setItem(&#39;sex&#39;, aInput[i].value);
                    }
                }

                if (oT.value) {
                    window.localStorage.setItem(&#39;note&#39;, oT.value);
                }
            }
        }
    </script>
</head>
<body>
<p>
    用户名: <input type="text"/>
</p>

<p>
    性别: <br/>
    <input type="radio" name="sex" value="男"/>男
    <input type="radio" name="sex" value="女"/>女
</p>

<p>
    备注:
    <textarea cols="30" rows="10"></textarea>
</p>

</body>
</html>

로그인 후 복사

위 내용은 HTML5 로컬 저장소 애플리케이션 sessionStorage 및 localStorage의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!