小编给大家分享一下HTML5中sessionStorage和localStorage怎么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于成都网站建设、成都网站设计、西平网络推广、小程序设计、西平网络营销、西平企业策划、西平品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联公司为所有大学生创业者提供西平建站搭建服务,24小时服务热线:028-86922220,官方网址:www.cdcxhl.com
在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怎么用”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
当前标题:HTML5中sessionStorage和localStorage怎么用
转载来于:https://www.cdcxhl.com/article34/pjidpe.html
成都网站建设公司_创新互联,为您提供定制网站、商城网站、网站营销、做网站、品牌网站设计、网站设计公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联