Articles
JavaScript入門
JavaScriptとStorageManager

JavaScriptとStorageManager

この記事では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 Storageは、アプリケーションの状態やデータをユーザーのローカルに保存するための重要な手段です。しかし、ストレージ容量の管理や永続性に関する情報が不足していると、予期せぬデータ消失が発生する可能性があります。

StorageManager は、ユーザーエージェント（主にブラウザ）が提供するAPIで、ストレージの使用状況や永続性に関する情報を取得・制御する手段を提供します。

StorageManagerとは？

StorageManager は navigator.storage を通じてアクセスできるオブジェクトで、以下のような主な機能を提供します。

  • 使用中および空きストレージの情報取得（navigator.storage.estimate()）
  • ストレージの永続化状態の確認（navigator.storage.persisted()）
  • ストレージを永続化するリクエスト（navigator.storage.persist()）

これは、主に Service Worker や PWA（Progressive Web App） で、ストレージの永続化を保証したい場合に非常に有効です。

使用可能かの確認

まずは、ブラウザが 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 は使用可能な最大容量です。使用状況をモニタリングし、アプリがストレージ制限に近づいている場合にユーザーに通知するなどの用途に使えます。

ストレージの永続性の確認

多くのブラウザでは、ストレージは「一時的（temporary）」に保存されており、ディスク容量が不足した場合に自動的に削除される可能性があります。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とIndexedDBJavaScriptにおける`ArrayBuffer`