ローカル ストレージは、開発者がユーザーのブラウザ内にデータを保存できるようにする便利な 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 サイトの他の関連記事を参照してください。