2021
11/17
15:00
你的位置:首页 > 网页设计 > 印象最深的一个bug:sessionStorage缓存在移动端失效

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

发布时间:2021-11-17 15:00:05

原标题:印象最深的一个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");

 
欢迎关注订阅微信公众号【熊泽有话说】,更多好玩易学知识等你来取
作者:熊泽-学习中的苦与乐
公众号:熊泽有话说
出处: 
您可以随意转载,摘录,但请在文章内注明作者和原文链接。  




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

关键词:

转载请保留本文网址: http://www.www.d5897.com/a/1247399.html
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#www.d5897.com (#换成@)。
您可能感兴趣的文章
Baidu