Web開発におけるローカルストレージをマスターする-CSSチュートリアル-php.cn

Web開発におけるローカルストレージをマスターする

王林

リリース： 2024-07-24 15:26:50

オリジナル

546 人が閲覧しました

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 サンプルは、ユーザーがテキストフィールドにテキストを入力し、ブラウザのローカルストレージに保存できる単純な Web ページを生成します。

ユーザーが入力ボックスにテキストを入力して「入力を保存」ボタンを押すと、テキストはブラウザのローカルストレージに保存されます。これは、ユーザーが Web サイトを更新したり、ブラウザを閉じて再度開いたりした場合でも、保存された入力には引き続きアクセスできることを意味します。コンソールのログとアラートは、入力が正常に保存されたことをユーザーに通知します。 (続きを読む)

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 キーを押すか、ページを右クリックして「検査」を選択します)、コンソールタブに移動します。

ブラウザの開発者ツールを使用してローカルストレージを直接表示することもできます。ほとんどのブラウザでは、ページを右クリックし、「検査」を選択して開発者ツールを取得し、「アプリケーション」または「ストレージ」タブに移動することでこれを行うことができます。そこから、「ローカルストレージ」セクションを展開して、Web サイトのキーと値のペアを表示します。この例では、キー「cart」には、保存されたカート項目を表す JSON 文字列が含まれています。
記事全文を読む - Web 開発におけるローカルストレージの習得: 初心者から専門家までの 8 つの実践例!

Json を学ぶ - ここをクリックしてください

以上がWeb開発におけるローカルストレージをマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。