網路儲存是現代瀏覽器中的一項強大功能，可讓您直接在客戶端儲存資料。即使在瀏覽器關閉後（使用 LocalStorage）或僅在會話期間（使用 SessionStorage），也可以保留此資料。這些工具對於儲存使用者偏好、購物車資料和其他類型的可增強使用者體驗的資訊非常有用。
了解 LocalStorage 和 SessionStorage 之間的差異是有效使用它們的關鍵：
本地儲存：
會話儲存：
使用 LocalStorage 和 SessionStorage 非常簡單。以下範例示範如何儲存、檢索和刪除資料。
// Storing data
localStorage.setItem('username', 'john_doe');
sessionStorage.setItem('sessionID', '123456');
// Retrieving data
const username = localStorage.getItem('username');
const sessionID = sessionStorage.getItem('sessionID');
// Removing data
localStorage.removeItem('username');
sessionStorage.removeItem('sessionID');
// Clearing all data
localStorage.clear();
sessionStorage.clear();
為了將這些概念付諸實踐，讓我們創建一個簡單的 Web 應用程序，允許用戶選擇並保存他們喜歡的主題（淺色或深色）。此首選項將使用 LocalStorage 進行存儲，以便即使在瀏覽器關閉後它仍然存在。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme Selector</title>
<style>
body.light {
background-color: white;
color: black;
}
body.dark {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>Theme Selector</h1>
<button id="light">Light Theme</button>
<button id="dark">Dark Theme</button>
<script>
const lightButton = document.getElementById('light');
const darkButton = document.getElementById('dark');
// Event listeners for theme selection
lightButton.addEventListener('click', () => {
document.body.className = 'light';
localStorage.setItem('theme', 'light');
});
darkButton.addEventListener('click', () => {
document.body.className = 'dark';
localStorage.setItem('theme', 'dark');
});
// Load saved theme on page load
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.body.className = savedTheme;
}
</script>
</body>
</html>
Web 儲存提供了一種簡單有效的方法來增強使用者體驗。透過在客戶端儲存首選項、會話或其他必要數據，您可以創建更個人化、響應靈敏且無縫的 Web 應用程式。了解並利用 LocalStorage 和 SessionStorage 將幫助您建立更聰明的應用程序，滿足用戶需求，而無需嚴重依賴伺服器端儲存。
LocalStorage 和 SessionStorage 是任何 Web 開發人員的必備工具。它們允許您直接在瀏覽器中儲存數據，從而提供數據可用方式和時間的靈活性。無論您需要保留使用者首選項還是維護特定於會話的信息，Web 儲存都可以讓您輕鬆完成此任務。透過掌握這些工具，您可以大幅增強 Web 應用程式的功能和使用者體驗。
以上是LocalStorage 和 SessionStorage 逐步指南：在客戶端儲存資料的詳細內容。更多資訊請關注PHP中文網其他相關文章！
