ストレージを使用してページをリロードした後にメニューとページの状態を維持する方法

ページのリロード後のメニュー状態の維持

ページのリロード後にメニューの状態を保存するには、ローカル ストレージを利用できます。方法は次のとおりです:

1. メニュー状態の保存: JavaScript の localStorage を使用して、クリックされたメニュー リンクの翻訳された位置を含む現在のメニュー状態を保存します。

<code class="javascript">// Assuming you have identified the clicked menu link as `clickedLink`
localStorage.setItem('menuState', clickedLink.id);</code>

2. ページ読み込み時にメニュー状態を取得: 後続のページ読み込み時に、保存されているメニュー状態を localStorage から取得します。

<code class="javascript">const menuState = localStorage.getItem('menuState');</code>

3. メニュー状態の復元: menuState で指定されたメニュー リンクの翻訳位置を設定して、メニュー状態を復元します。

<code class="javascript">if (menuState) {
  const clickedLink = document.getElementById(menuState);
  clickedLink.classList.add('clicked', 'hovered');
  // Adjust translation and other styles accordingly.
}</code>

4. ページの状態を維持:現在のページも維持したい場合は、ページ番号を localStorage に保存できます。同様の方法で取得して復元します。

<code class="javascript">// Assuming you have a variable `currentPage` to store the current page
localStorage.setItem('pageState', currentPage);

const pageState = localStorage.getItem('pageState');
if (pageState) {
  currentPage = pageState;
  // Adjust page content and navigation state accordingly.
}</code>

5. メニュー状態のクリア: 必要に応じて、localStorage 変数を削除してメニュー状態をクリアできます。これは、ログアウトするか、Web サイトの別のセクションに移動するときに実行できます。

<code class="javascript">localStorage.removeItem('menuState');
localStorage.removeItem('pageState');</code>

保管場所の長所と短所

• ローカル ストレージ:

  • 長所:

    • ブラウザ セッション間で永続的
    • 使い方が簡単

  • 短所:

    • ページ上のすべてのスクリプトにアクセス可能
    • ストレージ容量が限られている

• サーバー側ストレージ:

  • 長所:

    • ローカル ストレージより安全
    • 複数のデバイスからアクセス可能

  • 短所:

    • サーバーのセットアップとメンテナンスが必要
    • が発生する可能性がありますページ読み込みのレイテンシーとパフォーマンス

以上がストレージを使用してページをリロードした後にメニューとページの状態を維持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。