如何将获取数据存储到以后可以访问的全局变量中？答案

【问题标题】：How to store fetch data into a global variable that you can access later?如何将获取数据存储到以后可以访问的全局变量中？
【发布时间】：2022-08-14 00:54:17
【问题描述】：

我下面的代码是获取特定产品类型的所有产品，并且该数组包含我想在不同函数中使用的数据。我将如何将获取的数据存储到一个可以在不同函数中使用的变量中（我需要添加一个点击事件并过滤以在其他地方显示来自该数组的其他信息）

const displayProduct = (event) => {
    const info =document.getElementById(\'info\');
    const ul = document.getElementById(\'makeup-list\');
    ul.innerHTML = \" \";
    fetch(`https://makeup-api.herokuapp.com/api/v1/products.json/?product_type=${event.target.value}`)
        .then(res => res.json())
        .then(data => {
            data.forEach(data => {
                info.innerHTML += `<li><a href=\"#\" data-id=>${data.name}</a></li>`;
});

标签： javascript arrays api global-variables fetch-api

【解决方案1】：

您可以使用 localStorage - https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

保存在本地存储中：

ul.innerHTML = " "
 fetch( `https://makeup-api.herokuapp.com/api/v1/products.json/?product_type=${event.target.value}`)
.then(res => res.json())
//iterate
.then(data => {
    localStorage.setItem('myData', data);
 ....
}

在另一个函数中获取数据：

const data = localStorage.getItem('myData');

【讨论】：