正文 

当前位置： 首页 > java > java教程

浏览器有几种储存机制？讲一讲：storagefortheweb(代码片段)

半年的半年 半年的半年     2022-12-11     414

关键词：

前言

今天我们来讲一讲 Web 存储有几种机制，并弄清楚什么是临时存储，什么是持久存储。

你可能不知道的是：我们平常口中所说的持久存储 localStorage 很多时候其实是系统级别的“临时存储”。

正文

IndexedDB

Indexed DB 的操作是异步的，不会阻塞主线程的执行，可以在 window、web workers、service workers 环境中使用。

IndexedDB 是基于文件存储的，API 较为复杂，包含 v1 v2 的差异，建议通过类库来使用，比如：Dexie.js。

Cache Storage API

Cache Storage API 为缓存的 Request/Response 对象提供存储机制，常在 ServiceWorker 中应用。

异步，不会阻塞主线程的执行，可以在 window、web workers、service workers 环境中使用。

SessionStorage

同步，会阻塞主线程的执行。

一般用于储存临时性的少量的数据。

SessionStorage 是标签级别的，跟随者标签的生命周期，并且会随着标签的销毁而清空数据。

无法在 web workers、service workers 环境中使用。

它只能储存字符串，大小限制大约为 5MB。

LocalStorage

同步，会阻塞主线程的执行。

无法在 web workers、service workers 环境中使用。

它只能储存字符串，大小限制大约为 5MB。

Cookies

Cookies 有它的用途，但不适用于储存数据。

Cookie 会在每次 HTTP 请求的时候携带在请求头中，大体积的 Cookies 会显著增加 HTTP 请求的负担。

Cookies 读写是同步的，只能储存字符串，并且无法在 web workers 环境中使用。

File System API

File System API 和 FileWriter API 提供读取或写入文件到沙箱中（Sandboxed file system）。

它是异步的，不推荐使用，因为 File System API 只能在 Chromium 内核中使用。

File System Access API

File System Access API 设计用于便捷得读取和编辑本地文件。

但在读取或写入本地文件的时候，需要获得用户授权，并且授权状态无法持久化记录。

Application Cache

Application Cache 已被弃用，不建议使用。

建议迁移至 service workers 或 Cache API。

Storage 可以使用多少磁盘空间？

  • Chrome 允许使用 80% 的硬盘空间，单一的源（域名）可以使用 60% 的硬盘空间，可以通过 StorageManager API 检测最大的硬盘空间限额，其他基于 Chromium 内核的浏览器有不一样的限制，可能会允许使用更多的硬盘空间，查看更多实现 PR #3896
  • Internet Explorer 10（IE 10）及以上，最多可以储存 250MB，并在超过 10MB 的时候会提示用户
  • Firefox 允许使用 50% 的空闲硬盘空间，单个一级域名最多可以使用 2GB 硬盘空间，可以通过 StorageManager API 检测最大的硬盘空间限额
  • Safari 允许使用 1GB，当达到 1GB 的时候会提示用户（该数据可能不准确，没有找到 Safari 官方文档）

现代浏览器大多数已经不会再提示用户以授权更多的储存空间了。

如何检测储存空间是否可用？

在大多数浏览器中，可以通过 StorageManager API 检测储存空间总量与正在使用的量

if (navigator.storage && navigator.storage.estimate) 
  const quota = await navigator.storage.estimate();
  // quota.usage -> Number of bytes used.
  // quota.quota -> Maximum number of bytes available.
  const percentageUsed = (quota.usage / quota.quota) * 100;
  console.log(`You\'ve used $percentageUsed% of the available storage.`);
  const remaining = quota.quota - quota.usage;
  console.log(`You can write up to $remaining more bytes.`);

// quota data

  "quota": 299977904946,
  "usage": 27154039,
  "usageDetails": 
    "caches": 26813093,
    "indexedDB": 305864,
    "serviceWorkerRegistrations": 35082

注意：

  1. 并不是所有浏览器都实现了，因此使用之前需要先判断兼容性
  2. 需要捕获并处理超过配额限额的错误

IndexedDB 超限处理

indexedDB 超限将会执行 onabort 回调，并抛出一个 DOMException 错误，需要处理它的 QuotaExceededError 异常。

const transaction = idb.transaction([\'entries\'], \'readwrite\');
transaction.onabort = function(event) 
  const error = event.target.error; // DOMException
  if (error.name == \'QuotaExceededError\') 
    // Fallback code goes here
  
;

Cache API 超限处理

抛出一个 Promise Rejection，QuotaExceededError 错误对象，需要处理它的 QuotaExceededError 异常。

try 
  const cache = await caches.open(\'my-cache\');
  await cache.add(new Request(\'/sample1.jpg\'));
 catch (err) 
  if (error.name === \'QuotaExceededError\') 
    // Fallback code goes here

浏览器什么时候回收存储空间？

Web Storage 分为两种储存模式，分别是：临时存储 Best Effort 和持久存储 Persistent。

默认情况下网站数据（包括 IndexedDB, Cache API, LocalStorage 等）都储存在临时存储 Best Effort 中，会在存储空间不足的时候被浏览器清除掉。

各个浏览器回收存储空间的差异：

  • Chrome 当浏览器存储空间不足时，会优先清除最近最少使用的数据，逐个清除，直至不再超限
  • IE 10+ 不会自动清除数据，但会阻止站点继续写入数据
  • Firefox 当磁盘空间充满时，会优先清除最近最少使用的数据，逐个清除，直至不再超限
  • Safari（iOS、iPadOS、MacOS） 会自动清除超过 7 天以上的数据，但不会清除“已添加至主屏幕”的网站和“PWA”网站

申请和查看持久存储 Persistent Storage

申请持久存储 Persistent Storage：

// Request persistent storage for site
if (navigator.storage && navigator.storage.persist) 
  const isPersisted = await navigator.storage.persist();
  console.log(`Persisted storage granted: $isPersisted`);

查看持久存储 Persistent Storage 授权状态：

// Check if site\'s storage has been marked as persistent
if (navigator.storage && navigator.storage.persist) 
  const isPersisted = await navigator.storage.persisted();
  console.log(`Persisted storage granted: $isPersisted`);

各个浏览器申请持久存储 Persistent Storage 的差异：

  • 在 Chrome 55 以后，申请持久存储只需要满足以下任一条件，即可自动获得持久存储权限，无需用户确认：

    • 该站点已添加书签, 并且用户的书签数小于等于5个
    • 站点有很高的"site engagement"，通过这个命令可以查看: chrome://site-engagement/
    • 站点已添加到主屏幕
    • 站点启用了push通知功能
  • 在 Firefox 中，会提示用户授权

最后测试并验证：

  1. 打开 https://baidu.com，打开控制台输入 await navigator.storage.persist()，返回 true
  2. 打开 https://wy.guahao.com，打开控制台输入 await navigator.storage.persist()，返回 false

参考文献

  • 《Storage for the web》
  • 《Persistent storage》

数据库技术高质量面试总结

...化MySQL性能如何进行优化?MySQL慢查询的优化方式?索引索引有几种类型?索引有几种扫描方式?数据库基础union和unionall有什么区别?innodb引擎和myisam引擎的区别?数据库高级MySQL有几种隔离级别,默认的隔离级别是什么,讲一讲实现原理? 查看详情

经典面试题|讲一讲jvm的组成

...问的问题的了，而但凡问JVM一定会问的第一个问题就是：讲一讲JVM的组成？那本文就注重讲一下JVM的组成。首先来说JVM的组成分为，整体组成部分和运行时数据区组成部分，一般开发者关注的和面试官问的都是后者，但本文会详... 查看详情

经典面试题|讲一讲jvm的组成

...问的问题的了，而但凡问JVM一定会问的第一个问题就是：讲一讲JVM的组成？那本文就注重讲一下JVM的组成。首先来说JVM的组成分为，整体组成部分和运行时数据区组成部分，一般开发者关注的和面试官问的都是后者，但本文会详... 查看详情

讲一讲什么叫阻塞非阻塞同步异步

1.讲一讲什么叫阻塞非阻塞同步异步全是用来形容方法的，形容一个方法返回值状态的。2.io读取，网络读取，jdbc读取，这些流的操作都是bio的，都是阻塞的。3.所以沃恩一般在处理io操作时，都采用多线程来提高bio的效率。4.io操... 查看详情

干货分享！mysql缓存机制有几种

Redis简介Redis与Memcached区别Redis优点Redis缺点Redis数据类型StringHashListSetSortedsetRedis事务MULTI&EXEC（原子执行，并非互斥）WATCH&UNWATCH（原子执行+乐观锁）Redis分布式锁排他锁SETNX带有超时特性的锁Redi 查看详情

让菜鸡讲一讲费用流(ek)

让我再讲一个故事吧。又有一些小精灵要准备从银月城(S)迁徙到Nibel山(T)。这两个地方之间的道路构成了一个网络。每个道路都有它自己的容量，这决定了每天有多少小精灵可以同时从这儿通过。和上一篇不同的是，由于上次迁... 查看详情

阿里一面：讲一讲springspringmvcspringbootspringcloud之间的关系？

大家好，我是Tom哥~搞后端开发的同学，对Spring家族一定不陌生。Spring全家桶了为了解决不同场景的问题，逐渐演化出多套生态环框，如：Spring、SpringMVC、SpringBoot、SpringCloud它们之间的关系：SpringSpring一站... 查看详情

让菜鸡讲一讲斜率优化

终于把坑填到了这儿众所周知，斜率优化一般可以用在DP上而你可以发现斜率优化其实就是单调队列优化的进化我们在做DP题的时候，有时会遇到这种转移方程[f(i)=min(f(j)+a(i)b(j))+C]C是个可能和i有关的常数，在下面我们方便叙述把... 查看详情

让菜鸡讲一讲网络流(isap)

让我先讲一个故事吧。一些小精灵要准备从银月城(S)迁徙到Nibel山(T)。这两个地方之间的道路构成了一个网络。每个道路都有它自己的容量，这决定了每天有多少小精灵可以同时从这儿通过。现在它们想知道，它们迁徙的速度最... 查看详情

好好讲一讲，到底什么是java高级架构师!

一、什么是架构师曾经有这么个段子：甲：我已经应聘到一家中型软件公司了，今天上班的时候，全公司的人都来欢迎我。乙：羡慕ing，都什么人来了？甲：CEO、COO、CTO、Allof程序员，还有会计、司机都来了。乙：哇，他们太重... 查看详情

说一说st表讲一讲水题

ST表一、算法介绍　　如何快速求解RMQ问题呢？暴力复杂度O(n)，线段树复杂度O(n)~O(logn)，要是数据规模达到10^7或者更高呢？我们需要一种可以做到O(1)查询的算法，这时就可以用到ST表。　　我们用f[i][j]表示从j位置开始往右2^i个... 查看详情

面试必杀技，讲一讲spring中的循环依赖

本系列文章：听说你还没学Spring就被源码编译劝退了？30+张图带你玩转Spring编译读源码，我们可以从第一行读起你知道Spring是怎么解析配置类的吗？配置类为什么要添加@Configuration注解？谈谈Spring中的对象跟Bean，你知道Spring怎么... 查看详情

知识点干货--讲一讲finalfinallyfinalize的区别(代码片段)

“横看成岭侧成峰，远近高低各不同。不识庐山真面目，只缘身在此山中。”这首诗来自于宋朝苏轼《题西林壁》，它的意思是，庐山从正面看，它是一道道连绵起伏的山岭；从侧面看，它是一座巍然耸立的险峰，而从远处、近... 查看详情

openjudge2.6-1775讲一讲背包问题背包dp

1775:采药描述辰辰是个很有潜能、天资聪颖的孩子，他的梦想是称为世界上最伟大的医师。为此，他想拜附近最有威望的医师为师。医师为了判断他的资质，给他出了一个难题。医师把他带到个到处都是草药的山洞里对他说：“... 查看详情

面试官：讲一讲你对数据结构——数组链表栈队列的理解

本文已收录GitHub，更有互联网大厂面试真题，面试攻略，高效学习资料等一、解释定义1.数据结构：数据结构是指相互之间存在一种或多种特定关系的数据元素的集合。再简单描述一下：数据结构就是描述对象间逻辑关系的学科... 查看详情

经典面试题|讲一讲jvm的组成

...问的问题的了，而但凡问JVM一定会问的第一个问题就是：讲一讲JVM的组成？那本文就注重讲一下JVM的组成。首先来说JVM的组成分为，整体组成部分和运行时数据区组成部分，一般开发者关注的和面试官问的都是后者，但本文会详... 查看详情

图解vmware内存机制

在写《VMware内存机制初探》之后，原本是计划写一篇《VMware内存机制再探》的，讲一讲VMware内存机制中的另外几个重要内容，比如透明内存共享(TPS,TransparentPageSharing),RelaimMemory,Ballooning,swapping等等。但有网友反映说前面的文章还... 查看详情

面试官：请讲一讲io流核心模块与基本原理是什么？(代码片段)

前言一、IO流与系统IO技术在JDK中算是极其复杂的模块，其复杂的一个关键原因就是IO操作和系统内核的关联性，另外网络编程，文件管理都依赖IO技术，而且都是编程的难点，想要整体理解IO流，先从Linux操... 查看详情