web前端本地数据缓存
目录
[一、 什么是前端本地数据缓存](#一、 什么是前端本地数据缓存 "#_Toc1129306539%20")
[二、 为什么需要本地数据缓存](#二、 为什么需要本地数据缓存 "#_Toc794528787%20")
[三、 本地数据缓存的实现方式](#三、 本地数据缓存的实现方式 "#_Toc592006063%20")
[四、 选择最优的本地数据缓存策略](#四、 选择最优的本地数据缓存策略 "#_Toc554164290%20")
[五、 常见问题与解决策略](#五、 常见问题与解决策略 "#_Toc202644991%20")
[六、 高性能前端数据缓存方案设计案例。](#六、 高性能前端数据缓存方案设计案例。 "#_Toc2092783242%20")
一、什么是前端本地数据缓存
你是否曾经在浏览网页时因为网络请求慢而感到烦躁？
想象你正在烹饪一道复杂的菜肴，但是在关键时刻，你发现你需要的某种材料没有准备好，你需要现去寻找，这导致你的烹饪过程中断了。
这就好比一个网页的加载时间过长，导致你无法立即获取你想要的信息。
如果你在开始烹饪之前就提前准备好所有的食材和配料，那么当你在烹饪过程中需要它们的时候，你可以立刻拿到它们，不需要去停下手中的工作去寻找这些材料。这样你就可以流畅地进行烹饪，并最大化的提高你的烹饪效率。
同样道理，如果在网页加载的时候，你事先将数据缓存在浏览器中，不需要等待通过http请求的数据返回就可以直接渲染页面了，这样你的网页加载更流畅且高效。
Web前端开发的一个重要领域就是如何把数据高效地存储在本地。这不仅可以提升用户体验，而且也可以减少一些网络请求，本地存储也是HTML5中的重要特性之一，主要是用来解决在不同浏览器窗口之间进行本地数据共享的问题。本地数据缓存的应用场景十分广泛，例如保存用户信息，保存用户操作习惯，避免重复请求数据等。
缓存的目的是为了减少前端向后端服务器发送请求获取数据的速度。同时，页减少了请求数量，让渡了浏览器并发的资源，使得页面加载的整体速度大幅提升。
下面的图片是将同样的数据放到服务器和本地缓存时获取速度的对比。
从上图看出，测试数据总量为104kB，从服务器获取花费了620ms，而从localStorage中获取却不到1ms，完全可以忽略不计。
因此本地数据缓存对网页性能的提升帮助是非常巨大的。
主要体现在以下几个方面：
1、提升性能： 查询缓存后的数据比去服务器查询可以大大提升速度。这是因为访问内存和磁盘中数据的速度远远大于网络访问的速度。
2、降低延迟：本地缓存可以稳定应用性能，减少网络延迟。用户可以即时访问数据，不用等待网络请求。
3、减少网络流量和服务器负载：通过存储频繁使用的数据，可以减少对服务器的请求，从而节省网络流量，同时也能降低服务器处理请求的负载。
二、本地数据缓存的实现方式
前端实现数据缓存的常用技术有Cookies、LocalStorage、SessionStorage、IndexedDB等。
每种技术都有其独特的特性和使用场景。
1、Cookies：Cookies是由网站服务器发送给用户浏览器并存储在浏览器上的一种方式，用于保存用户的一些数据信息。每当同一台机器通过浏览器访问同一个网站时，这台机器上的浏览器会发送cookie以通知网站服务器用户的先前活动。通常被用于记住用户的登录信息。Cookies的大小受到4KB的限制，不能用于存储大量的信息。并且，每个网络请求都会附带cookie，会增加网络请求的大小。
2、LocalStorage：LocalStorage是一种在用户本地存储数据的方式。与Cookie不同，它不会随着每次的网络请求被发送出去，可以存储更大的信息（通常是5MB，不同浏览器限制不一样）。它将永久存储在用户的浏览器上，除非被用户明确删除。常用于存放一些不会频繁改动，但希望持久存在的数据，如用户的自定义设置等。
3、SessionStorage：SessionStorage与LocalStorage类似，也是用于在用户本地存储数据的方式。不过SessionStorage的生命周期仅限于当前的会话，即用户关闭了当前的浏览器页签，存储在SessionStorage的数据就会被清除。它的存储大小也通常是5MB，不同浏览器限制也不一样。常用于存放临时的数据，如表单的输入信息等。
4、IndexedDB：IndexedDB是一种更复杂的存储方式，它是一个由浏览器提供的非关系型数据库系统，允许存储更大量的数据（通常是无上限或者浏览器的硬盘空间），并提供了丰富的查询方式。它支持事务和异步操作，使其可以处理更复杂的场景，如邮件客户端、购物车应用等。IndexedDB也是持久存储的，除非被用户明确删除。另外，indexDb是异步的IO操作，所以它不会阻塞浏览器主线程。同时，异步操作也意味着我们在使用的时候需要更好的去进行代码设计，保证数据存取的时序，这样数据才不会出错。
三、选择最优的本地数据缓存策略
每种缓存策略都有其优点和缺点。
1、Cookies：如果我们需要对数据做前端缓存，选择Cookies显然是不明智的。
首先，Cookies的容量很小，只有4KB，而且每次HTTP请求都会携带，会引起性能问题。其次，为了系统安全，一般都会将Cookie设置为httpOnly。
2、LocalStorage：LocalStorage的容量大，可以达到5MB，但是没有过期时间，如果不清理可能会一直占用空间。
3、SessionStroage的生命周期只在当前会话，用户关闭浏览器后数据就会消失。
4、IndexedDB容量大且灵活，目前浏览器基本上都支持indexDB。但是它和LocalStorage一样没有过期时间，会一直占用空间。
四、常见问题与解决策略
1、存储域问题。
LocalStorage、SessionStorage、IndexedDB的存储域都是浏览器的同源策略，也就是同一协议、同一域名、同一端口。
2、跨页签数据污染
在浏览器，我们可以在不同的页签访问相同的网页。因此不同的页签产生的缓存数据有可能会产生数据污染。因为LocalStorage和IndexedDB只要是在同一域下就可以操作的。因此，一定要考虑不同页签操作数据时的安全性。要不然你会发现当前页面的数据会被其他页签数据影响到。
3、缓存数据复制
SessionStorage的生命周期是寄生在当前页签的，只要不是关闭了当前页签会话，SessionStorage数据就不会消失。当你刷新当前页面时，这些数据也不会消失。正常情况下同样的页面，不同的页签其中的SessionStorage也不会相同。但有些情况下，当前页面的SessionStorage会被同步到另一个页签中。比如，使用window.open打开一个新的页签，或者在浏览器页签名称上右键点击复制。一般来说我们使用SessionStorage就是为了让页签间的缓存数据隔离开来的。因此，在使用SessionStorage的时候一定要注意这个问题。
4、数据安全
Cookies一般是用来存放SessionKey的，所以通常来说会设置成httpOnly，避免了潜在的安全问题。而LocalStorage、SessionStorage和IndexedDB将数据存放在浏览器中还是存在一定的数据安全问题的。因此，建议前端缓存的本地数据不要有敏感数据，最好还要将存储的数据进行加密，在使用的时候再进行解密。
五、高性能前端数据缓存方案设计案例。
需求：用户希望有个网页，主要是做有大量的表单处理，而且根据表单类型不同需要填写的表单项目也不一样，有些表单允许用户输入大量脚本信息。另外，为了方便用户，这个页面还是一个多Tab的结构。也就是说这个页面可以同时查看和编辑多个表单。当用户F5刷新页面时，我们需要还原用户所有的草稿。但是当用户关闭当前页面后，再打开这个页面不希望有上一次的数据。
方案设计：
根据以上需求我们提炼出关键点：
1、需要对所有表单的数据进行前端数据缓存。
2、单个表单的数据量很大，还需要支持多Tab，而且还可能存在多页签的情况。因此，缓存数据的安全性需要特别注意。
3、缓存数据只在当前会话生效，生命周期是与当前会话相关的。
根据以上关键点，技术方案应该如下：
1、必须要用到SessionStorage，因为数据的生命周期是与会话相关的，而前端数据缓存与会话相关的方案也就只有SessionStorage了。
2、由于数据量可能比较大，LocalStorage和SessionStorage有数据量的限制，如果直接使用SessionStorage，有存储量超出导致页面崩溃的风险。因此需要将这些数据存储到indexedDB中。
3、对于可能导致SessionStorage被复制，使得多页面共用缓存数据的操作，也要特别注意。
综上所述，推荐方案如下：
1、给当前页面所在的页签一个唯一的UUID，将它存储在SessionStorage中。这样当会话结束时，这个UUID就会被移除掉了。
2、以当前UUID作为主键来对当前页面的数据进行存储和修改。而且数据中需要带上过期时间，这样我们就可以在WebWorker中通过定时器来对页面数据进行续期和对过期数据清理的操作。
3、为了保证SessionStorage不被复制，在页面跳转时尽量使用a标签。如果使用window.open可能会导致SessionSotrage被复制到新的页面，因此可以改写window.open。
4、为了预防用户通过在页签上使用右键复制窗口导致SessionStorage被复制，可以设置window.name的方式来检测当前是否为新打开的窗口，如果是新窗口就移除SessionStorage中的Key。
以上就是前端数据缓存的基本思路，有兴趣的可以参考我做的工具包（@rasir/page-storage
）：
六、总结
1、前端数据缓存的常用技术方案有Cookies、LocalStorage、SessionStorage、IndexedDB。
2、Cookies不推荐做前端数据的缓存。
3、LocalStorage、SessionStorage有容量限制，在选用的时候要先预估缓存数据量是否会超出限制。
4、SessionStorage在一定条件下是会被复制的，所以要评估这个复制是否会影响到缓存数据的安全。
5、要明确缓存数据的生命周期，以确定需要使用哪种技术方案。