localStorage的使用细节

  对于前端开发者来说,什么是最让我们头疼不已的事?那不用说自然是页面数据传递问题。解决了同域传输,那么还有跨域问题等着我们。总之,这一块的问题是我们最难解决的。但是随着H5的出现,它给我带来了更多的API,让我们去解决以前很难解决的问题。记得之前我们传递数据用的最多的是cookie、session和url带参数过去,但是现在H5给我们带来了web Storage和postMessage。当我们遇到问题不能头发胡子一把抓,应该是具体问题具体分析。而之前我遇到的问题多数是同域下进行数据传递,用的比较多的也是web Storage。下面我先简单的介绍下关于web Storage的用法和个人运用。

  Web Storage

  这个是H5中的一个对象,而这个对象中又有两个属性,localStorage和sessionStorage。sessionStorage顾名思义,其实也仅仅是局限于当前窗口的数据传递,如果窗口关闭了,那么所绑定的值也就没有了。所以,在实际的开发中我们很少会用到sessionStorage来传递数据。用的比较多的是localStorage。这个对象里面所包含的方法有如下几个:

  .setItem(key,value);//绑定所需要传递的键值对

  .getItem(key);//根据key来获取相应的value

  .removeItem(key);//根据key删除相应的value

  其实这三个方法是比较常用的方法。

  虽然localStorage好用,但是它也存在着一些缺点:

    1、localStorage由于浏览器安全问题无法实现跨域传递数据;它只能接受协议相同、端口相同和主机名相同的数据传递,而sessionStorage更为苛刻不仅要满足前面的条件,还必须是同窗口!

    2、存在一定的安全性问题,所以建议各位在使用它时,不要用来存储一些敏感数据;

    3、只兼容IE8以上的浏览器。

  但是这些缺点完全不影响我们使用localStorage来进行开发。反而知道它的一些缺陷后,我们能够更合理的来使用它帮我们完成一些工作。

  localStorage的生命周期

  因为localStorage是本地存储,所以它的生命周期是在你setItem的时候就一直存在于我们的内存里。甚至创建好之后,你关闭电脑再打开。这个时候通过getItem也是能够获取到相应值的。所以它的生命周期是在不主动删除的时候,它会一直存在。而sessionStorage则是窗口关闭之后,保存的值就随着浏览器窗口的关闭而销毁了。

  其实在同域下传值,localStorage是非常好用的。现在我们的项目里也用到了它,帮我解决了很多问题。但是后面我在做技术分享的时候被问到了几个比较让我尴尬的问题。localStorage能不能解决跨域问题?当时因为对这个API不是很熟悉,所以放黄枪了。回答的一些问题感觉也无法自圆其说。所以后面上网查了一些关于H5如何解决跨域传值的问题,也就是大家熟知的postMessage(),这个就在后面的笔记里做一些分享吧。上面的内容仅仅是本人学习了webStorage之后的一些心得,如果存在不足的地方,希望各位大神能够指点,谢谢!

时间: 2024-10-10 06:53:22

localStorage的使用细节的相关文章

对HTML5中LocalStorage的一些使用建议

上个月末的w3ctech上,有同行提到了LocalStorage这个话题,我觉得在HTML5的众多新特性中,LocalStorage算是比较实际同时浏览器也比较好实现的特性. LocalStorage的规范描述在这里:http://dev.w3.org/html5/webstorage/ 首先一个细节,LocalStorage只能存储键值对(key-value pair)形式的数据,并且key和value都只能存储为字符串类型.之所以这样说,因为JS是动态语言,我们可以在setItem时传入in

关于localStorage和sessionStorage存储用法的一些细节说明----------localStorage和sessionStorage存储必须字符串化

localStorage 和 sessionStorage 基本用法基本一致:localStorage需要会长时间保存,而sessionStorage会保存在当前对话框,会随着创库的关闭而被清除, 存储的数据格式必须是string:所以当localStorage.setItem(a,b)时,不管b为何种数据,在存储时都会被强制转化为string格式,进而在拿取getItem(a)时得到的永远是字符串, 但是在存储过程中如下细节需要注意: 1.存储数组时如果不处理,得到的是数组元素的字符串, va

angular和web前端的一些细节

HTML5中的本地存储localStorage:一直存储在本地sessionStorage:伴随着session,窗口关闭就没了用法:localStorage.setItem("key","value")//设置变量localStorage.getItem("key")//获取变量localStorage.removeItem("key")//清除变量 angularJS中scope和rootscope的区别scope:用于单

1-7 basket.js localstorage.js缓存css、js

basket.js 源码分析 api 使用文档: http://t3n.de/news/basketjs-performance-localstorage-515119/ 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此可以使我们防止不必要的重新请求 js 脚本,提升网站加载速度. 可以到 basket.js 的 Github 上查看更多的相关信息. 由于之前在工作中使用过

hybrid app开发中用到的html5新特性localStorage、sessionStorage和websql database

最近在项目中进行hybrid app开发,项目中有大量的js代码运行在android设备上.使用到了很多HTML5的新特性,之前没有遇到过,不了解,这里记录下增加点前端的知识.混合式app开发中,经常需要使用缓存功能,比如你在页面表单控件上输入了数据,你希望下次退出app再次进来的时候还能看到这些数据:比如你的项目中有保存草稿的功能,只是先将数据临时存储在本地,以后再提及到服务器.这就需要我们将数据持久地存储在本地,这就需要用到HTML5中的本地化存储解决方案.本文主要介绍下sessionSto

关于SVM数学细节逻辑的个人理解(三) :SMO算法理解

第三部分:SMO算法的个人理解 接下来的这部分我觉得是最难理解的?而且计算也是最难得,就是SMO算法. SMO算法就是帮助我们求解: s.t.   这个优化问题的. 虽然这个优化问题只剩下了α这一个变量,但是别忘了α是一个向量,有m个αi等着我们去优化,所以还是很麻烦,所以大神提出了SMO算法来解决这个优化问题. 关于SMO最好的资料还是论文<Sequential Minimal Optimization A Fast Algorithm for Training Support Vector

使用TCP时序图解释BBR拥塞控制算法的几个细节

周六,由于要赶一个月底的Deadline,因此选择了在家VPN加班,大半夜就爬起来跑用例,抓数据...自然也就没有时间写文章和外出耍了...不过利用周日的午夜时间(不要问我为什么可以连续24小时不睡觉,因为我觉得吃饭睡觉是负担),我决定把工作上的事情先放下,还是要把每周至少一文补上,这已经成了习惯.由于上周实在太忙乱,所以自然根本没有更多的时间去思考一些"与工作无关且深入"的东西,我指的与工作无关并非意味着与IT,与互联网无关,只是意味着不是目前我在做的.比如在两年前,VPN,PKI这

细节彰显境界,境界成就未来

电视里直播着一场国际比赛.对手分别是中国乒乓球骁将刘国正和德国名将波尔.两强相遇,胜负难分,经过六局的艰苦打拼,仍然不分高低,这让观众的心都提到了嗓子眼儿.到了决定胜负的关键一局,刘国正以12∶13落后,如果再输一分就将被淘汰.观众心里都为他默默捏着一把汗. 在这关键时刻,刘国正的一个回球出界.波尔的教练见状后立即起身狂欢,并准备冲进场内拥抱自己的弟子. 戏剧性的一幕出现了,在这一瞬间,波尔立即举手示意,指向台边--这是一个擦边球,应该是刘国正得分! 教练很惊讶,观众也很惊讶,怎么可能呢?就这样

apache配置虚拟主机时需要注意到几个小细节

如今apache在web服务器这块市场占有率还是很高的,而配置虚拟主机现在也是用的非常多,不过在配置虚拟主机的时候一定要注意几个小细节. 首先要注意你的apache版本,注意是2.2还是2.4的. 配置2.2的时候,配置虚拟主机该这样写: NameVirtualHost ip:80   //注意此处与2.4不同 <VirtualHost ip:80> ServerName www1.myweb.com DocumentRoot "/myweb/vhost/www1" <