HTML5本地存储应用sessionStorage和localStorage

百变鹏仔 3个月前 (10-18) #H5教程

文章标签 sessionStorage

在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

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集