Day 17：瀏覽器的 Web Storage API

16th鐵人賽

tsou3636

2024-10-08 17:36:22

109 瀏覽

分享至

什麼是 Web Storage？

Web Storage 是瀏覽器提供的一種儲存資料的機制，允許網站在用戶的瀏覽器中本地儲存資料，而不需要使用伺服器。它包含了兩種主要的儲存技術：

LocalStorage：資料永遠保留，除非被手動刪除，瀏覽器關閉也不會清除。
SessionStorage：資料只在瀏覽器當前會話中保留，當瀏覽器或標籤頁關閉時，資料會自動清除。
這些技術比使用 Cookie 更方便，也更加安全，因為它們只在瀏覽器中運行，而不會像 Cookie 那樣每次請求都發送到伺服器。

LocalStorage 和 SessionStorage 的差異

LocalStorage：資料是持久性的，即使關閉瀏覽器，資料仍然存在。
SessionStorage：資料只在會話中有效，關閉瀏覽器或標籤頁後，資料會被刪除。
兩者都可以通過簡單的 API 操作，儲存鍵值對形式的資料。

LocalStorage 的基本用法
LocalStorage 提供了一些基本的方法來操作資料：

localStorage.setItem(key, value)：儲存資料
localStorage.getItem(key)：取得資料
localStorage.removeItem(key)：刪除資料
localStorage.clear()：清空所有資料

範例：儲存用戶名稱

// 儲存用戶名稱
localStorage.setItem('username', 'John');

// 取得用戶名稱
let username = localStorage.getItem('username');
console.log(username);  // 會輸出 "John"

// 刪除用戶名稱
localStorage.removeItem('username');

SessionStorage 的基本用法
SessionStorage 的操作方式與 LocalStorage 幾乎相同，只是資料在當前會話結束後會自動刪除。
範例：儲存用戶偏好設置

// 儲存用戶偏好
sessionStorage.setItem('theme', 'dark');

// 取得用戶偏好
let theme = sessionStorage.getItem('theme');
console.log(theme);  // 會輸出 "dark"

// 清空所有 session 資料
sessionStorage.clear();

範例：簡單的待辦事項應用
這是一個利用 LocalStorage 實現的簡單待辦事項應用，讓用戶可以新增事項並在頁面重新加載後仍然保留。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待辦事項應用</title>
</head>
<body>
    <h1>我的待辦事項</h1>
    <input type="text" id="taskInput" placeholder="新增待辦事項">
    <button id="addTaskBtn">新增</button>
    <ul id="taskList"></ul>

    <script>
        const taskInput = document.getElementById('taskInput');
        const addTaskBtn = document.getElementById('addTaskBtn');
        const taskList = document.getElementById('taskList');

        // 載入本地儲存的事項
        document.addEventListener('DOMContentLoaded', loadTasks);

        // 新增待辦事項
        addTaskBtn.addEventListener('click', function() {
            const task = taskInput.value;
            if (task) {
                addTaskToDOM(task);
                saveTaskToLocalStorage(task);
                taskInput.value = '';  // 清空輸入欄
            }
        });

        function loadTasks() {
            const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
            tasks.forEach(task => addTaskToDOM(task));
        }

        function addTaskToDOM(task) {
            const li = document.createElement('li');
            li.textContent = task;
            taskList.appendChild(li);
        }

        function saveTaskToLocalStorage(task) {
            const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
            tasks.push(task);
            localStorage.setItem('tasks', JSON.stringify(tasks));
        }
    </script>
</body>
</html>

在這個範例中，用戶可以新增待辦事項，並且透過 LocalStorage 儲存資料。即使頁面重新載入，資料仍然會顯示。

何時使用 LocalStorage 或 SessionStorage？