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应用没有打开

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

相关推荐
vvilkim8 分钟前
Flutter开发入门:Dart语言基础全面解析
android·前端·flutter
Allen Bright9 分钟前
【CSS-4】掌握CSS文字样式:从基础到高级技巧
前端·css
lens9413 分钟前
Oxlint v1.0.0 发布:ESLint 的性能革命,快 50~100 倍!
前端·javascript
这里是阿栗15 分钟前
TS进阶!深入探索 TypeScript 工具类型:内置神器与高阶扩展
前端·typescript
DarkLONGLOVE17 分钟前
一键锁死网页内容!这个JS函数让你的原创无法被复制!
前端·javascript
DarkLONGLOVE18 分钟前
彻底解决"'vue-cli-service' 不是内部或外部命令"的问题!
前端·vue.js
hepherd18 分钟前
Flutter - 原生交互 - 相机Camera - 02
flutter
curdcv_po30 分钟前
甲方嫌弃,项目首页加载太慢
前端
刘同学有点忙32 分钟前
技术升级中的"幽灵Bug"排查:从message失效看架构迁移的隐性成本
前端
怪大叔952733 分钟前
vue组件之远程组件
前端·javascript·vue.js