프론트엔드 인터뷰: 브라우저에서는 하루에 한 개의 팝업창만 뜰 수 있는데 어떻게 달성할 수 있나요?

브라우저에서 하루에 하나의 팝업창만 팝업되는 기능을 구현하려면 로컬 저장소(localStorage)를 이용하여 팝업창의 상태를 기록하면 됩니다. 다음은 한 가지 구현입니다.

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함수가 호출되어 팝업 창을 표시하고 로컬 저장소의 태그를 현재 날짜로 업데이트합니다.

이런 방식으로 같은 날 팝업 창이 하나만 나타나도록 하고, 다음 페이지 로드 시 팝업 창이 반복되지 않도록 할 수 있습니다.