隨著Web應用程序的流行，JavaScript作為網頁的一部分變得越來越重要。JavaScript不僅是一個強大的編程語言，也是開發web應用程序必需的一部分。它允許保存自定義數據并作為網頁的持久性存儲。

保存數據的方法之一是使用cookie。Cookie是一個小的文本文件，存儲在用戶的計算機上，可以包含任何類型的數據。我們可以使用JavaScript設置，讀取和刪除cookie。例如，我們在用戶登錄時可以使用cookie來存儲其用戶名，以便在每個頁面上顯示歡迎信息。以下是一個示例，演示如何在JavaScript中設置和讀取cookie：

// 設置cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
// 讀取cookie
var x = document.cookie;

該例中，我們使用document.cookie將一個cookie設置為用戶名“John Doe”，并設置cookie的過期時間。在讀取cookie時，我們可以通過訪問document.cookie來檢索它的值。

另一種保存數據的方法是使用本地存儲。本地存儲是一組Web API，允許我們在瀏覽器中保存數據，與cookie相比，它有更大的存儲限制。本地存儲中，我們可以使用兩種方式之一來存儲數據：

• localStorage- 用于存儲無過期時間的數據，當瀏覽器關閉時它也不會過期。
• sessionStorage- 用于存儲一個會話期間的數據，當瀏覽器關閉時它會被自動刪除。

以下是例子，展示如何在localStorage中存儲和讀取數據：

// 存儲數據
localStorage.setItem("username", "John Doe");
// 讀取數據
var x = localStorage.getItem("username");

在這個例子中，我們使用localStorage.setItem()來設置一個鍵值對，將"username"設置為"John Doe"。我們可以使用localStorage.getItem()來檢索值并讀取數據。

另一個存儲數據的方法是通過使用IndexedDBAPI。IndexedDB是一個鍵值對存儲，它允許我們存儲任何類型的數據，并允許使用復雜的查詢和索引。以下是一個簡單的IndexedDB使用示例：

// 打開數據庫
var request = indexedDB.open("myDB", 1);
request.onerror = function(event) {
console.log("Failed to open database");
};
// 創建對象存儲
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore("users", {keyPath: "id"});
objectStore.createIndex("name", "name", {unique: false});
};
// 添加數據
request.onsuccess = function(event) {
var db = event.target.result;
var tx = db.transaction("users", "readwrite");
var objectStore = tx.objectStore("users");
objectStore.add({id: 1, name: "John Doe", email: "johndoe@example.com"});
tx.oncomplete = function() {
db.close();
};
};
// 檢索數據
var request = indexedDB.open("myDB", 1);
request.onsuccess = function(event) {
var db = event.target.result;
var tx = db.transaction("users", "readonly");
var objectStore = tx.objectStore("users");
var index = objectStore.index("name");
var request = index.get("John Doe");
request.onsuccess = function(event) {
console.log(request.result);
db.close();
};
};

在上面的代碼中，我們打開IndexedDB數據庫，創建一個對象存儲并創建一個索引。我們添加一個用戶到對象存儲中，并獲取該用戶通過索引名“name”中名稱為“John Doe”的數據。

我們可以使用上述任何方法來保存自定義數據，每個方法都有不同的優點和用法。使用本地存儲和IndexedDB可以保存大量數據，并且相比cookie來說更加靈活和安全。