JavaScriptを使って、HTMLでボタンを押すと数字が増加し、ブラウザの更新後もその数字を保持したい場合、ローカルストレージを利用する方法が便利です。さらに、複数のインラインフレーム内で独立して増加する数字を維持する方法についても解説します。
基本的な増加・リセット機能の実装
まず、ボタンを押すことで数字が増え、リセットボタンを押すことで数字が初期化される基本的なプログラムを作成します。ローカルストレージを利用することで、ブラウザを更新しても数字が維持されます。以下のコードでその基本的な動作を実現できます。
const storage = { key: 'counterTest' }; const countNum = document.querySelector('p'); document.addEventListener('DOMContentLoaded', () => { storage.data = +localStorage.getItem(storage.key); countNum.textContent = storage.data; }); document.querySelector('#buttons').addEventListener('click', e => { if (e.target.id === 'countUp') { countNum.textContent = ++storage.data; localStorage.setItem(storage.key, storage.data); } else if(e.target.id === 'reset') { countNum.textContent = storage.data = 0; localStorage.removeItem(storage.key); } });上記のコードでは、増加ボタンを押すと数字が増え、リセットボタンを押すと数字が0に戻り、ローカルストレージにその状態が保存されます。
複数のインラインフレーム内で独立した数字の維持
複数のインラインフレーム（iframe）でそれぞれ異なる数字を維持するためには、各インラインフレーム内で独立したローカルストレージを使用する必要があります。これを実現するためには、各iframeに異なるキーを設定して、個別に数字を保存・管理します。
例えば、iframeごとに別々のローカルストレージのキーを使用して、各フレーム内で増加した数字が独立して保存されるようにします。これにより、ページ全体を更新しても、インラインフレーム内の数字はそれぞれ独立して維持されます。
リンクを設定した削除ボタンの作成
質問にあった削除ボタンを表示して、各ページにリンクするようにするためには、削除ボタンにリンク先のURLを指定することができます。削除ボタンをクリックすると、ローカルストレージから数字が削除され、指定されたページに遷移します。
const deleteButton = document.querySelector('#delete'); deleteButton.addEventListener('click', () => { localStorage.removeItem(storage.key); window.location.href = 'http://example.com'; });上記のコードでは、削除ボタンを押すと、ローカルストレージからデータが削除され、指定されたページに遷移します。
まとめ
このように、JavaScriptのローカルストレージを使用することで、ブラウザを更新しても数字が維持される仕組みを簡単に実現できます。また、複数のインラインフレーム内で独立した数字を維持する方法や、削除ボタンでリンクを設定する方法についても説明しました。これらを組み合わせることで、より高度な動作を実現することができます。
コメント