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

 

欢迎关注订阅微信公众号【熊泽有话说】，更多好玩易学知识等你来取

作者：熊泽-学习中的苦与乐
公众号：熊泽有话说


出处： https://www.cnblogs.com/xiongze520/p/15568939.html


您可以随意转载、摘录，但请在文章内注明作者和原文链接。