摘要：移动端缓存失效是我印象最深的一个之一，为啥呢，因为这个问题导致我加班到很晚。的生命周期是仅在当前会话下有效。引入了一个浏览器窗口的概念，是在同源的窗口中始终存在的数据。
无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 您可以随意转载、摘录，但请在文章内注明作者和原文链接。
|
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/123764.html
摘要：最近的一次更新的变量有效，并且会作用于全部的引用的处理方式和相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效嵌套三种预编译器的选择器嵌套在使用上来说没有任何区别，甚至连引用父级选择器的标记也相同。 面试汇总一：2018大厂高级前端面试题汇总 高级面试：【半月刊】前端高频面试题及答案汇总 css内容 响应式布局 当前主流的三种预编译器比较 CSS预处理器用一种专门的...
摘要：使用方法与相同存储读取删除删除所有删除某个兼容性与都支持，大部分浏览器都支持六是在浏览器保存结构化数据中的一种数据库。所以是为了可以在客户端存储大量的结构化数据而存在的，并且使用索引高效检索的。 前言 浏览器缓存就是把一个请求过的web资源，存储在浏览器中。等下次在访问相同的请求时，缓存会根据缓存机制去决定要不要向服务器发送请求，或者直接用缓存的资源响应访问。 浏览器缓存一般包含有 1...
摘要：根据标准，到目前为止，一共有种缓存机制，有些是之前已有，有些是才新加入的。首次请求缓存有效期内请求缓存过期后请求一般浏览器会将缓存记录及缓存文件存在本地文件夹中。 腾讯 Bugly 特约作者：贺辉超 1. H5 缓存机制介绍 H5，即 HTML5，是新一代的 HTML 标准，加入很多新的特性。离线存储（也可称为缓存机制）是其中一个非常重要的特性。H5 引入的离线存储，这意味着 web ...
摘要：最近学习了本地存储几种方式各自的特点和区别，遂记录下来，以加深印象。是服务器种植在客户端的形式文本文件。这也是限制大小的原因。保存在客户端，不随着请求发送给服务器，避免了流量的浪费。存储的信息是会话级别的，同域也是不能共享的。 最近学习了本地存储几种方式各自的特点和区别，遂记录下来，以加深印象。 一、cookie cookie算是比较早的技术，最初是为了记录http的状态，提高访问速度...
阅读 2623·2021-11-18 10:07
阅读 1083·2021-08-03 14:04
阅读 724·2019-08-30 13:08
阅读 2578·2019-08-29 15:33
阅读 1085·2019-08-29 14:07
阅读 2981·2019-08-29 14:04
阅读 1435·2019-08-29 11:19
阅读 1143·2019-08-29 10:59
