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

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

相关推荐
月忆3642 分钟前
等待组(waitgroup)
前端·爬虫·python
令狐寻欢5 分钟前
HTML中 的 meta 标签常用属性及其作用
前端·html
SynthWriter10 分钟前
Trae 帮我生成了一个贪吃蛇的游戏,好玩儿
前端
用户214118326360223 分钟前
dify案例分享-Dify+RSS 聚合 8 大平台实时热点,新闻获取效率飙升 300%
前端
百锦再25 分钟前
Razor编程中@Html的方法使用大全
前端·html
啪叽28 分钟前
JavaScript可选链操作符(?.)的实用指南
前端·javascript
Ian在掘金29 分钟前
bat+python实现easy connect自动连接
前端·python
代码搬运媛31 分钟前
【react实战】如何实现监听窗口大小变化
前端·javascript·react.js
小桥风满袖33 分钟前
Three.js-硬要自学系列30之专项学习环境光
前端·css·three.js
Luckyfif36 分钟前
🤯由 性能指标 散发开来的 Performance API 被问爆了呀
前端·面试·性能优化