首頁 > 文章 > web前端 > HTML5本機儲存應用sessionStorage和localStorage

HTML5本機儲存應用sessionStorage和localStorage

大家讲道理原創: 2017-08-19 14:13:402787瀏覽

在html5之前，瀏覽器要實現資料的存儲，通常都是用cookie，但是cookie有網域名稱和大小限定.

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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：HTML5實現行動端自適應的幾種方法介紹下一篇：HTML5實現行動端自適應的幾種方法介紹

看更多