ホームページ > 記事 > ウェブフロントエンド > Web開発におけるローカルストレージをマスターする
Web開発におけるローカルストレージをマスターする
- 王林オリジナル
- 2024-07-24 15:26:50470ブラウズ
ローカル ストレージは、開発者がユーザーのブラウザ内にデータを保存できるようにする便利な 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 サイトの他の関連記事を参照してください。