印象最深的一个bug:sessionStorage缓存在移动端失效-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

印象最深的一个bug:sessionStorage缓存在移动端失效

无bug,不程序:作为程序员的我,不是修bug就是在写bug的路上。

创新互联公司是一家网站设计制作、成都做网站,提供网页设计,网站设计,网站制作,建网站,按需求定制制作,网站开发公司,自2013年创立以来是互联行业建设者,服务者。以提升客户品牌价值为核心业务,全程参与项目的网站策划设计制作,前端开发,后台程序制作以及后期项目运营并提出专业建议和思路。

  移动端sessionStorage缓存失效是我“印象最深的一个bug”之一,为啥呢,因为这个问题导致我加班到很晚。在现在看来就是一个简单的概念问题。

在我刚工作的时候,公司还没有招到前端工程师,于是作为后端工程师的我开始了不怎么愉快地前端之旅,不知道大家是否理解自学新语言的苦,里面的坑简直能让人自闭。

  作为我兼职前端的第一个bug:“移动端sessionStorage缓存失效”,没错,就是概念没理解透,导致在App里面获取后为null(这里的App是一个jQuery Mobile盒子套html),在PC端是正常的。

  因为sessionStorage的生命周期是仅在当前会话下有效,移动端切换页面是关闭原页面打开新页面,知道sessionStorage特性的朋友看到这里是不是瞬间理解了?

解决方案,我们知道sessionStorage被清空的原因是:移动端切换页面是关闭原页面打开新页面,因此,在做移动端的时候,可以采用localStorage保存数据,使用完后再清空localStorage。

当然,如果是在同一个页面中,sessionStorage的使用是没有任何问题的。

我们一起看一下sessionStorage和localStorage的概念,深入了解一下:

  1、生命周期:localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。

       sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。

        只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。

  2、存储大小:localStorage和sessionStorage的存储数据大小一般都是:5MB。

  3、存储位置:localStorage和sessionStorage都保存在客户端,不与服务器进行交互通信。

  4、存储内容类型:localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。

  5、获取方式:localStorage:localStorage.getItem("key");;sessionStorage:sessionStorage.getItem("key")。

  6、应用场景:localStorage:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据。sessionStorage:敏感账号一次性登录;

  看到这里是不是感觉很简单,换成localStorage就可以了,正所谓“会者不难难者不会”,当时的我刚刚转换学习前端,很多概念没理解透导致一些前端问题频繁出现。

我们简单看一下写入和读取方式:

//写入缓存
localStorage.setItem("key", "value");
//获取缓存
 localStorage.getItem("key");

//写入缓存
sessionStorage.setItem("key", "value");
//获取缓存
sessionStorage.getItem("key");

分享文章:印象最深的一个bug:sessionStorage缓存在移动端失效
标题URL:http://kswsj.cn/article/dsopohs.html

其他资讯