JavaScript 与 StorageManager

Articles

本文介绍 JavaScript 与 StorageManager。

我们将详细讲解 StorageManager 的功能，并通过实际可在浏览器中运行的代码示例，逐步介绍其使用方法。

YouTube Video

javascript-storage-manager.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args
119                    .map(arg => (typeof arg === "object" && arg !== null ? JSON.stringify(arg) : String(arg)))
120                    .join(" ");
121                output.appendChild(message);
122            };
123
124            // Override console.error
125            const originalError = console.error;
126            console.error = function (...args) {
127                originalError.apply(console, args);
128                const message = document.createElement('div');
129                message.textContent = args
130                    .map(arg => (typeof arg === "object" && arg !== null ? JSON.stringify(arg) : String(arg)))
131                    .join(" ");
132                message.style.color = 'red'; // Color error messages red
133                output.appendChild(message);
134            };
135        })();
136
137        document.getElementById('executeBtn').addEventListener('click', () => {
138            // Prevent multiple loads
139            if (document.getElementById('externalScript')) return;
140
141            const script = document.createElement('script');
142            script.src = 'javascript-storage-manager.js';
143            script.id = 'externalScript';
144            //script.onload = () => console.log('javascript-storage-manager.js loaded and executed.');
145            //script.onerror = () => console.log('Failed to load javascript-storage-manager.js.');
146            document.body.appendChild(script);
147        });
148    </script>
149</body>
150</html>

JavaScript 与 StorageManager

浏览器中的 localStorage 和 IndexedDB 等 Web 存储功能，对于将应用的状态和数据本地化存储在用户设备上来说至关重要。但是，如果缺乏存储容量管理和持久性的信息，可能会导致意外的数据丢失。

StorageManager 是由用户代理（主要是浏览器）提供的一个 API，用于获取和管理存储的使用情况及持久性的信息。

什么是 StorageManager？

StorageManager 是可以通过 navigator.storage 访问的对象，主要提供以下功能：。

获取已用和可用存储信息（navigator.storage.estimate()）
检查存储的持久性状态（navigator.storage.persisted()）
请求存储持久化（navigator.storage.persist()）

如果您希望在 Service Workers 或 PWA（渐进式网页应用） 中确保存储持久化，这一点尤为重要。

检查可用性

首先，检查浏览器是否支持 StorageManager。

1if ('storage' in navigator && 'estimate' in navigator.storage) {
2    console.log("StorageManager is supported.");
3} else {
4    console.warn("StorageManager is not supported in this browser.");
5}

可以通过检测 navigator.storage 对象是否存在，并包含 estimate 方法来判断是否支持。

获取存储使用情况

通过 navigator.storage.estimate()，你可以获得应用当前使用的存储量和总存储配额。

 1async function showStorageUsage() {
 2    if (!navigator.storage || !navigator.storage.estimate) {
 3        console.warn("StorageManager is not supported.");
 4        return;
 5    }
 6
 7    const { usage, quota } = await navigator.storage.estimate();
 8    console.log(`Used: ${(usage / 1024 / 1024).toFixed(2)} MB`);
 9    console.log(`Total: ${(quota / 1024 / 1024).toFixed(2)} MB`);
10    console.log(`Usage percentage: ${(usage / quota * 100).toFixed(2)}%`);
11}
12
13showStorageUsage();

usage 表示当前已使用的字节数，quota 表示最大可用容量。你可以通过监控存储使用量，在应用接近存储上限时提醒用户，或应用于其他场景。

检查存储持久性

在许多浏览器中，存储默认是‘临时’的，这意味着如果磁盘空间不足，可能会自动删除。通过 persisted() 方法，可以检查当前存储是否为持久性。

1async function checkPersistence() {
2    const isPersisted = await navigator.storage.persisted();
3    console.log(`Persistent storage: ${isPersisted ? "Yes" : "No"}`);
4}
5
6checkPersistence();

请求存储持久化

如果存储还不是持久性的，可以使用 persist() 请求浏览器进行持久化。但是，这个请求有可能因用户操作或特定条件不被批准。

1async function requestPersistence() {
2    const granted = await navigator.storage.persist();
3    console.log(`Persistence request ${granted ? "granted" : "denied"}`);
4}
5
6requestPersistence();

在许多浏览器中，满足以下条件会提高存储持久化请求被批准的概率：。

应用已作为 PWA 安装
用户经常使用该应用
应用在 HTTPS 环境下运行
存储持久化请求与用户明确操作（如点击）相关联

实用示例：在未持久化时，向用户请求存储持久化

 1async function ensurePersistence() {
 2    const isPersisted = await navigator.storage.persisted();
 3    if (isPersisted) {
 4        console.log("Already using persistent storage.");
 5        return;
 6    }
 7
 8    const granted = await navigator.storage.persist();
 9    if (granted) {
10        alert("Storage has been set to persistent.");
11    } else {
12        alert("Unable to set persistent storage. Your data may be deleted.");
13    }
14}
15
16document.querySelector("#persistButton").addEventListener("click", ensurePersistence);

在本示例中，用户点击按钮时请求存储持久化。通过按钮触发请求，使其处于用户操作上下文中，有助于提高通过率。

注意事项与兼容性

navigator.storage 只在HTTPS 环境下可用。
主流浏览器（Chrome、Edge、Firefox）支持该功能，但在 Safari 中部分功能受限。
quota 取决于设备的存储情况，同一网站在不同设备上的值可能不同。

总结

通过 StorageManager，Web 应用可以更加安全和有策略地使用用户的本地存储。它主要提供以下功能：。

可以通过 estimate() 检查存储使用情况。
可以通过 persisted() 检查持久性状态。
可以通过 persist() 请求持久化。

在开发 PWA 或离线优先应用时，利用 StorageManager 能同时提升用户体验并加强数据保护。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。请也查看我们的YouTube频道。

YouTube Video

JavaScript 和 IndexedDB JavaScript中的`ArrayBuffer`