97成人精品区在线播放 ,放荡的护士hd在线观看

HTML5本地存儲應(yīng)用sessionStorage和localStorage

大家講道理

發(fā)布： 2017-08-19 14:13:40

原創(chuàng)

3027人瀏覽過

在html5之前，瀏覽器要實現(xiàn)數(shù)據(jù)的存儲，一般都是用cookie，但是cookie有域名和大小限定.?

html5流行之后，可以通過localStorage和sessionStorage實現(xiàn)瀏覽器端的數(shù)據(jù)存儲，這兩者有什么特點呢？

sessionStorage
? ?　　sessionStorage屬于臨時會話，數(shù)據(jù)存儲的有效期為：從頁面打開到頁面關(guān)閉的時間段,屬于窗口的臨時存儲，頁面關(guān)閉，本地存儲消失

localStorage

永久存儲（可以手動刪除數(shù)據(jù)）

立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
存儲量限制 ( 5M )

AppMall應(yīng)用商店
AI應(yīng)用商店，提供即時交付、按需付費的人工智能應(yīng)用服務(wù)

56

查看詳情
客戶端完成，不會請求服務(wù)器處理
sessionStorage數(shù)據(jù)在頁面之間不能共享、而localStorage可以實現(xiàn)頁面之間共享

sessionStorage的應(yīng)用:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var aInput = document.getElementsByTagName('input');
            aInput[0].onclick = function(){
                //sessionStorage: 臨時存儲, 只在當(dāng)前頁面有效,不能傳遞到其他頁面,頁面關(guān)閉之后消失
                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="設(shè)置" />
<input type="button" value="獲取" />
<input type="button" value="刪除" />
<br/>
<input type="text" />
</body>
</html>

登錄后復(fù)制

localStorage的應(yīng)用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var aInput = document.getElementsByTagName('input');
            aInput[0].onclick = function(){
                //localStorage : 永久性存儲
                window.localStorage.setItem("name", aInput[3].value);
                window.localStorage.setItem("name2", 'aaaaa');
            };
            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="設(shè)置" />
<input type="button" value="獲取" />
<input type="button" value="刪除" />
<br/>
<input type="text" />
</body>
</html>

登錄后復(fù)制

<!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('sex') == 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('sex', aInput[i].value);
                    }
                }

                if (oT.value) {
                    window.localStorage.setItem('note', 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>

登錄后復(fù)制

以上就是HTML5本地存儲應(yīng)用sessionStorage和localStorage的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)標(biāo)簽：

sessionstorage html5