將獲取的 JSON 數據保存到 sessionStorage

Question

我剛剛想出了如何編寫一個 async/await function 來從 API 獲取數據，它正在工作，但它像瘋了一樣擊中 API。 所以現在我試圖將獲取的數據保存到 sessionStorage，並且如果數據不在 sessionStorage 中，則僅從 API 中獲取。

這是我的代碼：

const fetchMeetingData = async () => {
    console.log('api hit')
    try {
        const response = await fetch(https://sheet.best...)
        const data = await response.json()
        validate(data) // Clean data to remove null key values
        return data
    } catch (e) {
        console.log('Fetch error with getMeetingData()')
    }
}

const filterMeetings = async (filters) => {
    meetings = await fetchMeetingData()
    meetings.forEach((meeting) => {
        meeting.time2 = moment(meeting.time, ["h:mm A"]).format("HHmm")
    })
    let today = moment().format("dddd").toString()
    let hour = moment().format('HHmm').toString()
    let filteredMeetings = meetings.filter(function (matches) {
        if (document.querySelector('#select-day').selectedIndex === 0 && filters.searchText === '') {
            return matches.day === today &&
                moment(matches.time, ["h:mm A"]).format("HHmm") > hour
        } else {
            return true
        }
    })

這是我嘗試過的：

const fetchMeetingData = async () => {
    console.log('api hit')
    try {
        const response = await fetch(https://sheet.best...)
        const data = await response.json()
        validate(data) // Clean data to remove null key values
        sessionStorage.setItem('meetingData', JSON.stringify(data)) // added this line
        return data
    } catch (e) {
        console.log('Whoa! Fetch error with getMeetingData()')
    }
}

我不確定 go 從這里到哪里，或者這是否是正確的方法。 我的菜鳥本能是做這樣的事情，但沒有奏效。

savedMeetingData = sessionStorage.getItem('meetingData')

const getSavedMeetingData = async () => {
    if (savedMeetingData) {
        meetings = savedMeetingData
        return meetings
    } else {
        fetchMeetingData()
        meetings = await data
        return meetings
    }

const filterMeetings = async (filters) => {
    meetings = await getSavedMeetingData() // replaces call to fetchMeetingData
    meetings.forEach((meeting) => {
        meeting.time2 = moment(meeting.time, ["h:mm A"]).format("HHmm")
    })

我不確定這是否正是我正在嘗試的代碼，但它很接近。 問題是 API 仍然受到攻擊，即使數據已成功存儲到 sessionStorage。

對於如何澄清這個問題，我真的很感激一些幫助和/或建議。

解決方案：基於@Christian 的回答

// StackOverflow Q/A
async function getMeetingData() {
    const preLoadedData = sessionStorage.getItem('meetingData')
    if(!preLoadedData) {
        try {
            const response = await fetch('https://sheet.best...')
            const data = await response.json()
            validate(data)
            sessionStorage.setItem('meetingData', JSON.stringify(data))
            console.log('api hit')
            return data
        } catch (e) {
            console.log('Whoa! Fetch error with getMeetingData()')
        }
    } else {
        console.log('no api hit!!!')
        return JSON.parse(preLoadedData)
    }
}
async function getSavedMeetingData() {
    const meetings = await getMeetingData()
    return meetings
}
const filterMeetings = async (filters) => {
    meetings = await getSavedMeetingData()
    meetings.forEach((meeting) => {
        meeting.time2 = moment(meeting.time, ["h:mm A"]).format("HHmm")
    })

Answer 1

如果您可以更明確地說明究竟是什么不起作用，那就太好了:)（沒有在 sessionStorage 中保存數據？，無法檢索它？等等...）。 無論如何，也許你可以嘗試這樣的事情，看看它是否有幫助：

async function getSavedMeetingData() {
  const meetingData = await getMeetingData();
}

async function getMeetingData() {
  const preloadedData = sessionStorage.getItem('meetingData');

  if (!preloadedData) {
    try {
      const response = await fetch('https://myapiurl.com/');
      const data = validate(response.json());
      sessionStorage.setItem('meetingData', JSON.stringify(data));
      return data;
    } catch (e) {
      console.log('Whoa! Fetch error with getMeetingData()');
    }
  } else {
    return JSON.parse(preloadedData);
  }
}

再提醒一下（以防萬一），請記住您將其保存到sessionStorage ，因此如果您關閉選項卡，不要期望保存信息，在這種情況下您應該使用localStorage 。