1. 歡迎
在本實驗室中，您會將用戶端資料備份及還原至 IndexedDB。這是漸進式網頁應用程式研討會的一系列配套程式碼研究室中的第三個。先前的程式碼研究室是「使用 Workbox」。本系列還有五個程式碼研究室。
課程內容
- 使用
idb建立 IndexedDB 資料庫和物件儲存區 - 在物件商店中新增及擷取項目
注意事項
- JavaScript 和 Promise
軟硬體需求
- 支援 IndexedDB 的瀏覽器
2. 開始設定
首先，請複製或下載完成本程式碼研究室所需的範例程式碼：
如果複製存放區，請確認您位於 pwa03--indexeddb 分支版本中。ZIP 檔案也包含該分支版本的程式碼。
這個程式碼集需要 Node.js 14 以上版本。取得程式碼後，請在程式碼資料夾中從指令列執行 npm ci，安裝所有需要的依附元件。接著執行 npm start，啟動本程式碼研究室的開發伺服器。
原始碼的 README.md 檔案會說明所有發布的檔案。此外，您在本程式碼研究室中會使用下列主要現有檔案：
金鑰檔案
js/main.js- 主要應用程式 JavaScript 檔案
3. 設定資料庫
您必須先開啟及設定 IndexedDB 資料庫，才能使用該資料庫。雖然您可以直接執行這項操作，但由於 IndexedDB 是在 Promise 成為主流之前標準化的，因此其以回呼為基礎的介面可能難以使用。我們將改用 idb，這是 IndexedDB 的小型 Promise 包裝函式。首先，請將其匯入 js/main.js：
import { openDB } from 'idb';
接著，在 DOMContentLoaded 事件監聽器的頂端加入下列設定程式碼：
// Set up the database
const db = await openDB('settings-store', 1, {
upgrade(db) {
db.createObjectStore('settings');
},
});
說明
這裡會建立名為 settings-store 的 IndexedDB 資料庫。版本會初始化為 1，並使用名為 settings 的物件儲存區進行初始化。這是最基本的物件儲存空間類型，也就是簡單的鍵/值組合，但您可以視需要建立更複雜的物件儲存空間。如果沒有初始化物件儲存區，就沒有地方可放置資料，因此省略這項步驟就像建立沒有資料表的資料庫。
4. 在更新時儲存編輯器狀態
資料庫初始化完成後，就可以將內容儲存至資料庫！編輯器會公開 onUpdate 方法，讓您傳遞函式，每當編輯器中的內容更新時，系統就會呼叫該函式。非常適合輕觸並將變更新增至資料庫。如要這麼做，請在 js/main.js 中的 defaultText 宣告之前新增下列程式碼：
// Save content to database on edit
editor.onUpdate(async (content) => {
await db.put('settings', content, 'content');
});
說明
db 是先前開啟的 IndexedDB 資料庫。put 方法可建立或更新該資料庫中物件儲存區的項目。第一個引數是要使用的資料庫物件儲存區，第二個引數是要儲存的值，第三個引數則是儲存值的鍵 (如果值不明確的話，在本例中，由於資料庫未包含指定鍵，因此值不明確)。由於這是非同步作業，因此會包裝在 async/await 中。
5. 在載入時擷取狀態
最後，為了復原使用者進行中的工作，必須在編輯器載入時載入該工作。編輯器提供 setContent 方法，可設定內容。目前用於將其設為 defaultText 的值。請將該行更新為下列內容，改為載入使用者先前的工作：
editor.setContent((await db.get('settings', 'content')) || defaultText);
說明
現在，系統會嘗試從 settings-store IndexedDB 資料庫的 settings 物件儲存區取得 content 鍵，而不是只將編輯器設為 defaultText 的值。如果該值存在，系統就會使用該值。如果沒有，系統會使用預設文字。
6. 設定及擷取夜間模式狀態
您現在已熟悉 IndexedDB，請將下列程式碼新增至 js/main.js 底部，並更新程式碼，以便在夜間模式初始化時儲存及載入使用者偏好設定。
// Set up night mode toggle
const { NightMode } = await import('./app/night-mode.js');
new NightMode(
document.querySelector('#mode'),
async (mode) => {
editor.setTheme(mode);
// Save the night mode setting when changed
},
// Retrieve the night mode setting on initialization
);
7. 恭喜！
您已瞭解如何從 IndexedDB 的物件儲存空間儲存及載入資料。
本系列下一個程式碼研究室是「從分頁到工作列」