将提取的 JSON 数据保存到 sessionStorage

Question

我刚刚想出了如何编写一个 async/await 函数来从 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()')
    }
}

我不确定从这里到哪里去，或者这是否是正确的方法。我的菜鸟本能是做这样的事情，但没有用。

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。

非常感谢您提供有关如何澄清此问题的and/or建议。

解决方案：基于@Christian

的回答

// Whosebug 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.

将提取的 JSON 数据保存到 sessionStorage

Save fetched JSON data to sessionStorage

javascript

json

session-storage

async-await