Как я могу использовать localStorage в моем приложении React?

Question

Я получаю данные из API, я хотел бы использовать localStorage в течение одного часа, мне нужно получать данные через каждый час.

• Мой API выглядит следующим образом:

  {
    "name": "My Name",
    "logo": "https://media.img.jpeg",
    "note": "14,5",
    "students": 3720,
    "url": "https://url.students/alain"
  }
  

• Вот мой код, https://codesandbox.io/s/busy-cloud-qzmef

Answer 1

Все, что вам нужно, это сохранить необходимые данные с отметкой времени. И проверьте, не истек ли срок.

loadData = () => {
    // Check whether data exists in localStorage and has been
    // saved less than an hour ago
    const data = JSON.parse(localStorage.getItem('brand'));
    if (data && (new Date().getTime() - data.created <= 3600)) {
        this.setState({
            note: data.brand.note,
            logo: data.brand.logo,
            name: data.brand.name,
        });

        return;
    }

    // Otherwise perform request
    axios.get('https://myAPI.url').then(res => {
        const brand = res.data;

        // and save data in local storage with the current timestamp
        localStorage.setItem(
            'brand',
            JSON.stringify({
                created: new Date().getTime(),
                brand,
            }),
        );

        this.setState({
            note: brand.note,
            logo: brand.logo,
            name: brand.name,
        });
    });
};

Answer 2

Вместо того, чтобы сохранять эти элементы в вашем localStorage, я рекомендую вместо этого хранить их в хранилище избыточностей. Если вы не используете Redux: https://react -redux.js.org / введение / быстрый запуск

Answer 3

    // Save To localStorage
    const data = {
            "name": "My Name",
            "logo": "https://media.img.jpeg",
            "note": "14,5",
            "students": 3720,
            "url": "https://url.students/alain"
    }
    localStorage.setItem('key', JSON.stringify(data))


    // To Get data from localstorage 
    const data = JSON.parse(localStorage.getItem('key'));
    console.log(data);


    // To Remove Data
    localStorage.removeItem('key');

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>