欢迎光临
我的个人博客网站

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


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

  移动端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");

 

 
欢迎关注订阅微信

赞(0) 打赏
未经允许不得转载:张拓的天空 » 印象最深的一个bug:sessionStorage缓存在移动端失效
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

© 2021 张拓的天空   网站地图 鄂ICP备15021472号-1

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏