フロントエンド インタビュー: ブラウザーでポップアップ ウィンドウを表示できるのは 1 日に 1 つだけですが、それを実装するにはどうすればよいですか? ご意見をお聞かせください。

ブラウザに 1 日に 1 つのポップアップ ウィンドウのみをポップアップさせる機能を実装するには、ローカル ストレージ (localStorage) を使用してポップアップ ウィンドウの状態を記録します。ここに実装の 1 つを示します。

1. ページが読み込まれるときに、ポップアップ ステータス タグがローカル ストレージにすでに存在するかどうかを確認します。
2. タグが存在しない場合、またはタグが最後のポップアップが前日であることを示している場合は、ポップアップを表示し、ローカル ストレージ内のタグを現在の日付に更新します。
3. フラグが存在し、最後のポップアップがその日にあったことを示す場合、ポップアップは表示されません。

サンプルコードは次のとおりです。

    // 检查弹窗状态的函数
    function checkPopupStatus() {
      // 获取当前日期
      const currentDate = new Date().toDateString();

      // 从本地存储中获取弹窗状态标记
      const popupStatus = localStorage.getItem('popupStatus');

      // 如果标记不存在或者标记表示上一次弹窗是在前一天
      if (!popupStatus || popupStatus !== currentDate) {
        // 显示弹窗
        displayPopup();

        // 更新本地存储中的标记为当前日期
        localStorage.setItem('popupStatus', currentDate);
      }
    }

    // 显示弹窗的函数
    function displayPopup() {
      // 在这里编写显示弹窗的逻辑，可以是通过修改 DOM 元素显示弹窗，或者调用自定义的弹窗组件等
      console.log('弹出弹窗');
    }

    // 在页面加载时调用检查弹窗状态的函数
    checkPopupStatus();

この実装では、checkPopupStatusページのロード時に関数が呼び出されます。まず、現在の日付とポップアップ状態フラグをローカル ストレージから取得します。タグが存在しない場合、または最後のポップアップ ウィンドウが前日であることを示している場合、displayPopup関数が呼び出されてポップアップ ウィンドウが表示され、ローカル ストレージ内のタグが現在の日付に更新されます。

こうすることで、同じ日にポップアップ ウィンドウが 1 つだけ表示されるようになり、その後のページの読み込み時にポップアップ ウィンドウが繰り返し表示されなくなります。