首頁 >web前端 >css教學 >掌握 Web 開發中的本機存儲

掌握 Web 開發中的本機存儲

王林原創: 2024-07-24 15:26:50578瀏覽

Mastering Local Storage in Web Development

本地儲存是一種有用的 Web 開發工具，使開發人員能夠在使用者的瀏覽器中保存資料。在本文中，我們將介紹本地儲存的不同功能，從初學者層級的範例開始，然後繼續介紹更複雜的技術。閱讀本指南後，您將對如何在 Web 應用程式中成功使用本機儲存有基本的了解。

本地儲存的初級範例

1。儲存使用者首選項：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Preferences</title>
</head>

<body>
    <label for="theme">Choose a theme:</label>
    <select id="theme">
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="medium">Medium</option>
    </select>
    <button onclick="savePreference()">Save Preference</button>

    <script>
        function savePreference() {
            const selectedTheme = document.getElementById('theme').value;
            localStorage.setItem('theme', selectedTheme);
            console.log('Preference saved:', selectedTheme);
            alert('Preference saved!' + " " + selectedTheme);
        }
    </script>
</body>

</html>

當使用者選擇主題並點選「儲存首選項」按鈕時，此程式碼會將主題記錄到控制台。若要閱讀此日誌，請開啟瀏覽器的開發人員工具（通常按 F12 或右鍵單擊頁面並選擇「檢查」）並前往控制台標籤。（了解更多）

2。記住使用者輸入：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Remember User Input</title>
</head>

<body>
    <input type="text" id="userInput">
    <button onclick="saveInput()">Save Input</button>

    <script>
        function saveInput() {
            const userInput = document.getElementById('userInput').value;
            localStorage.setItem('savedInput', userInput);
            console.log(userInput + " " + 'saved !');
            alert('Input saved!');
        }
    </script>
</body>

</html>

此 HTML 範例產生一個簡單的網頁，允許使用者在文字欄位中輸入文字並將其儲存到瀏覽器的本機儲存中。

當使用者在輸入框中輸入文字並點擊「儲存輸入」按鈕時，文字將會儲存在瀏覽器的本機儲存中。這意味著即使用戶刷新網站或關閉並重新打開瀏覽器，保存的輸入仍然可以存取。控制台日誌和警報通知使用者其輸入已成功儲存。 (閱讀更多)

3。購物車持久化：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Cart</title>
</head>

<body>
    <h1>Shopping Cart</h1>
    <ul id="cartItems"></ul>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const savedCart = JSON.parse(localStorage.getItem('cart')) || [];
            const cartItemsElement = document.getElementById('cartItems');

            savedCart.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item;
                cartItemsElement.appendChild(li);
            });
            console.log('Saved cart items:', savedCart);
        });

        function addToCart(item) {
            const savedCart = JSON.parse(localStorage.getItem('cart')) || [];
            savedCart.push(item);
            localStorage.setItem('cart', JSON.stringify(savedCart));
            console.log('Added', item, 'to cart');
            location.reload(); // Refresh the page to reflect changes
        }
    </script>

    <button onclick="addToCart('Item 1')">Add Item 1 to Cart</button>
    <button onclick="addToCart('Item 2')">Add Item 2 to Cart</button>
    <button onclick="addToCart('Item 3')">Add Item 3 to Cart</button>
</body>

</html>

此範例示範如何使用本機儲存儲存購物車。新增至購物車的商品將作為陣列保存在本地儲存中的「cart」鍵下。頁面載入時，將從本地儲存中提取並顯示已儲存的購物車項目。

當您點擊「將商品 X 新增至購物車」按鈕之一時，對應的商品將會加入購物車中，更新的購物車內容將會顯示在控制台中。若要檢查這些日誌，請開啟瀏覽器的開發人員工具（通常按 F12 或右鍵單擊頁面並選擇「檢查」）並前往控制台標籤。

您也可以直接透過瀏覽器的開發者工具查看本機儲存。大多數瀏覽器允許您透過右鍵單擊頁面，選擇「檢查」以取得開發人員工具，然後導航至「應用程式」或「儲存」標籤來執行此操作。從那裡，展開“本地儲存”部分以查看網站的鍵值對。在此範例中，按鍵「cart」包含表示已儲存的購物車項目的 JSON 字串。
閱讀全文 - 掌握 Web 開發中的本機儲存：8 個實作範例，從新手到專家！

學習 Json - 點這裡

以上是掌握 Web 開發中的本機存儲的詳細內容。更多資訊請關注PHP中文網其他相關文章！

json html String Array if using console this alert input

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用現代 CSS 建立響應式等高卡片（Flexbox 的魔力和無媒體查詢）下一篇：使用現代 CSS 建立響應式等高卡片（Flexbox 的魔力和無媒體查詢）

看更多