Question

我正在使用我在网上找到的随机颜色API来制作当天Web应用程序的随机颜色。到目前为止，一切工作正常，但是由于我是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

如何在React中将API请求限制为每天一次？

您不能，真的。 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

这可以通过将当前颜色存储在浏览器中一天来满足您的需求。代码应该很清楚，但是只问是否不是。
（在带有Node后端的Chrome中进行了测试，但在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（）”）

如何在React中将API请求限制为每天一次？

3 个答案: