Как ограничить запрос API одним разом в день в React?

Question

Я делаю веб-приложение со случайным цветом, используя API случайных цветов, который я нашел в Интернете. Пока все работает, но так как я новичок в JavaScript и React, мне немного любопытно, как я могу ограничить запрос API одним разом в день. Теперь API работает так, что при каждом обновлении страницы каждый раз будет появляться новый цвет. Есть ли способ ограничить это одним цветом, который будет появляться в день - одним цветом - независимо от того, сколько раз вы обновляете страницу? Спасибо!

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor() {
    super()
    this.state = {
    items: [],
    isLoaded: true
  }
}

  componentDidMount() {
    fetch("http://www.colr.org/json/colors/random/7")
    .then(res => res.json())
    .then(res => {
      this.setState({
        isLoaded: true,
        items: res.colors
      });
    })
  }



  render() {

  var itemName = this.state.items.map(item => item.id)
  var itemHex = this.state.items.map(item => item.hex)
  //var itemHex = items.map(item => <div key={item.id}>{item.hex}</div>)

    if (!(this.state.isLoaded)) {
      return (
        <div>
          <h1>Not Loaded!</h1>
        </div>
      )
    }
    else {
    return (
      <section style={{ backgroundColor: "#" + itemHex[0]}} className="App">
        <h1>JR's color of the day is: <h2 style={{color: "#" + itemHex[4]}}>{itemName[0]}.</h2></h1>
        <h1>also, the hex is: {"#" + itemHex[0]}</h1>
        <h4>here are some other colors that go w/ it</h4>
        <div style={{backgroundColor: "#" + itemHex[1]}} className="rectangle1"></div>
        <div style={{backgroundColor: "#" + itemHex[2]}} className="rectangle2"></div>
        <div style={{backgroundColor: "#" + itemHex[3]}} className="rectangle3"></div>
      <h3><a href="http://www.colr.org/api.html">data courtesy of the color API, colr.org</a></h3>
      </section>
    );
  }
  }
}

export default App;

Answer 1

Как ограничить запрос API одним разом в день в React?

Вы не можете, правда.Ограничение скорости API выполняется на сервере.Любой может очистить свои cookie-файлы, локальное хранилище или любые другие средства сохранения, которые вы используете в браузере для ограничения скорости запросов.

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

Answer 2

вам просто нужно хранить дату и цвета для каждой выборки.и лишить законной силы ваш кэш на основе сегодняшней строки даты и сохраненной.

componentDidMount() {

  let cachedColors;

  if(localStorage.getItem('cached-colors'))
    cachedColors = JSON.parse(localStorage.getItem('cached-colors'));

  // setting cachedColors to null if it wasn't stored today
  if(cachedColors && new Date().toDateString() !== cachedColors.date)
    cachedColors = null;

  // if cachedColors still got value, it means we can use it as valid cache for today
  if(cachedColors)
      this.setState({
        isLoaded: true,
        items: cachedColors.value
      });
  else
    fetch("http://www.colr.org/json/colors/random/7")
    .then(res => res.json())
    .then(res => {
      this.setState({
        isLoaded: true,
        items: res.colors
      });



    })
  }

Answer 3

Это делает то, что вы ищете, сохраняя текущий цвет в браузере в течение одного дня. Код должен быть понятным, но просто спросите, если это не так.
(Протестировано в Chrome с бэкэндом Node, но должно быть хорошо в React)

  let now = new Date().getTime(); // number of milliseconds since the 60's ended in London
  const oneDay = 1000 * 60 * 60 * 24; // number of milliseconds in a day

  if(localStorage.color && localStorage.expireTime && parseInt(localStorage.expireTime) > now){

    let storedColor = localStorage.color; // or localStorage.getItem("color")
    console.log(`Returning user -- Color from last visit is ${storedColor}`);
  }
  else{

    let newColor = "green"; // Set your new color here
    let newExpireTime = now + oneDay;
    localStorage.setItem("color", newColor);
    localStorage.setItem("expireTime", newExpireTime);

    let dateString = new Date(newExpireTime).toLocaleString();
    console.log(`First visit (since storage was cleared). New color, ${newColor}, will be replaced at ${dateString}`);
  }

(Редактировать: удален вывод html и вместо этого добавлена ​​информация в console.log,
удален localStorage.clear (), который был для отладки)