摘要:本篇教程探讨了HTML5教程 sessionStorage、localStorage与cookie,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
本篇教程探讨了HTML5教程 sessionStorage、localStorage与cookie,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
<
HTML5的WebStorage提供了两种API:localStorage(本地存储)和sessionStorage(会话存储)。
sessionStorage与localStorage区别:
1.sessionStorage在浏览器关闭后自动销毁;而localStorage无期限,除非主动删除。
2.sessionStorage由于上述特性,也就不能够在不同页面之间进行数据共享,同一域名也是不可以的;
localStorage则能够实现该需求,但是仅限于同一域名下;
两者的用法相似:
// 保存或设置数据到sessionStorage
sessionStorage.setItem('key','value')
// 获取某个sessionStorage
sessionStorage.getItem('key')
// 从sessionStorage删除某个保存的数据
sessionStorage.removeItem('key')
// 从sessionStorage删除所有保存的数据
sessionStorage.clear();
// 保存或设置数据到localStorage
localStorage.setItem('key','value')
// 获取某个localStorage
localStorage.getItem('key')
// 从localStorage删除某个保存的数据
localStorage.removeItem('key')
// 从localStorage删除所有保存的数据
localStorage.clear();
sessionStorage、localStorage与cookie区别:
1.cookie在浏览器和服务器端来回传递数据,这样无形中浪费了带宽。而localStorage和sessionStorage不会自动把数据发送给服务器,仅会保存在本地;
2.存储大小限制不同,cookie数据不能超过4K,同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大;
3.数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭之前有效;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭;
4.作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的;
5.web storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号