HTML5本地存储应用sessionStorage和localStorage

前端开发教程 2025-01-11 0

在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('input');
            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('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=设置 />
<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('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>

以上就是HTML5本地存储应用sessionStorage和localStorage的详细内容，更多请关注云资源网其它相关文章！

原文链接：https://www.sudo1.com

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。