JavaScript 轻量级缓存
2021-06-29
localStorage VS sessionStorage
二者统称为 Web Storage。使用场景是少量数据缓存,用来替代 Cookie
还是很不错滴。
localStorage | sessionStorage | |
---|---|---|
常见场景 | 代替 cookie 和 window 全局变量,存储一些计算费时的,需要多页面/组件共享的变量 |
类似 localStorage ,但是有时效 * |
时效性 | 长期存在,仅当用户/程序手动删除时才失效 | 有点复杂,本身 session 就很难讲请,sessionStorage 的时效性和 session 又有区别😂 |
限额 | 5MB | 5MB |
IndexedDB
光看它的 API 文档 IndexedDB
最多能存硬盘的 50%,每个组(简单理解为一个站点)能存最少 10MB 最多 2GB!简直不要太开心~
不过考虑到上手难度极高,一般都会使用第三方库 IndexedDB
。
Web SQL
注意,Web SQL 并不是 HTML 5
标准,目前仅支持 Chromium 系的浏览器
使用方法也炒鸡简单,仅三个基础 API:opendatabase、transaction、executeSql。
storageHelper
1 | import { Utility } from './utility'; |
备注:
- 因为限额,在计算缓存主键的时候,我使用了
MD5
信息摘要算法以缩小键的长度。可能会有些哈希碰撞问题,可考虑替换成SHA1
或者其他更高级的算法(如果性能不是关注点的话)。 - 有时候我们的页面可能会和其他页面共存,甚至是我们的页面内嵌在其他页面中。如果这时候需要清空缓存,简单粗暴的直接调用
Storage.clear
方法,可能会导致其他页面报错/不正常工作。为避免此类事情发生,在计算缓存主键的时候,我额外添加了固定前缀。这样的话,如果真要清空缓存,挑出属于自己程序的缓存再手动删除。 - 因为会有 5MB 的限额,程序很容易会超过这个限制,所以程序设计时一定要考虑这种情况,比如使用
LRU
这样的过期策略。我这里简单起见,直接忽略了 😄。
参考链接
本文链接:
content_copy https://zxs66.github.io/2021/06/29/JavaScript-Storage-lite/