- A+
无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");
|
欢迎关注订阅微信
   
|
