Flutter Web应用清理缓存

前言

应用清理缓存是一个常见的功能,在移动端清理缓存这个行为比较常见,但是游览器web应用清理缓存并不常见,很多人都不会特地去清理,与之相关的,flutter的web应用清理缓存的资料网上比较少,本文进行一些探讨

正文

要清理缓存,首先要知道缓存是如何产生的,然后再针对这个产生方式做缓存清理

LocalStorage

LocalStorage是Web存储API的一部分,允许网站在用户的浏览器中存储键值对数据,每个键和值都是字符串类型

LocalStorage的数据存储在用户的设备上,不会随着浏览会话结束而被清除

  • 大多数浏览器为LocalStorage设置了约5MB的容量限制
  • LocalStorage的操作是同步的,这意味着大量数据操作可能会阻塞主线程

同时实际上,flutter的SharedPreferences在web端就是由此实现

清理方式如下

Dart 复制代码
import 'dart:html' as html;

void clearLocalStorage() {
  html.window.localStorage.clear();
}

IndexedDB

IndexedDB是一个复杂、强大的客户端存储解决方案,支持在用户浏览器中存储大量结构化数据,允许创建、读取、导航和写入数据库的对象存储,支持事务、索引、游标等数据库概念

  • 相比LocalStorage,IndexedDB提供了更大的存储空间。
  • IndexedDB的操作都是异步的,不会阻塞用户界面
  • 可以存储诸如文件、Blob、ArrayBuffer等复杂数据类型

清理方式

Dart 复制代码
import 'dart:indexed_db' as idb;
import 'dart:html' as html;

Future<void> deleteIndexedDB(String dbName) async {
  try {
    await html.window.indexedDB!.deleteDatabase(dbName);
  } catch (e) {

  }
}

Service Worker

Service Worker是一种在浏览器背后运行的脚本,可以用来拦截和处理网络请求,允许控制页面的缓存,并在没有网络连接时提供内容

  • Service Worker有自己的生命周期,独立于Web页面
  • 支持在后台同步数据,即使用户已经关闭了页面
  • 可以接收来自服务器的推送通知,即使Web应用没有打开

需要根据具体的代码制定具体清理策略,给其发送消息执行清理逻辑

相关推荐
不浪brown14 分钟前
开源!矢量建筑白模泛光特效以及全国77个大中城市的矢量shp数据获取!
前端·cesium
山有木兮木有枝_15 分钟前
JavaScript 数据类型与内存分配机制探究
前端
小小小小宇21 分钟前
前端 异步任务并发控制
前端
bysking35 分钟前
【27-vue3】vue3版本的"指令式弹窗"逻辑函数createModal-bysking
前端·vue.js
LuckySusu35 分钟前
【HTML篇】script`标签中的 defer 与 async:深入解析异步加载 JavaScript 的差异
前端·html
CAD老兵36 分钟前
在 TypeScript 中复用已有 Interface 的部分属性:完整指南
前端
龚思凯41 分钟前
Vue 3 中 watch 监听引用类型的深度解析与全面实践
前端·vue.js
于冬恋1 小时前
Web后端开发(请求、响应)
前端
red润1 小时前
封装hook,复刻掘金社区,暗黑白天主题切换功能
前端·javascript·vue.js
Fly-ping1 小时前
【前端】vue3性能优化方案
前端·性能优化