Javascript 如何在react中缓存已获取的数据而无需重复

我知道，使用

Redux

我有公共

存储

，当我更改位置时，例如我从

/videos

页面，但我仍然在

videos

reducer中获取视频。所以，如果我决定返回到我的

视频

页面，我会向用户显示已经从我的商店加载的视频，如果他需要，会加载更多并存储它们

但是在

React

中，如果我更改我的位置

/videos

，在那里我获取了一些视频，然后将它们存储在我的

VideosPage

组件的本地状态，然后返回此页面，我就没有视频了，应该从头开始获取它们

我如何缓存它们，这有可能吗

PS：这是一个理论性的问题，因此没有提供代码。

您可以使用以下内容进行缓存：-

1） 本地存储

2） Redux商店

3） 在安装和卸载之间保留数据

import React, { Component, PropTypes } from 'react';

// Set initial state
let state = { counter: 5 };

class Counter extends Component {

 constructor(props) {
  super(props);

  // Retrieve the last state
  this.state = state;

  this.onClick = this.onClick.bind(this);
}

componentWillUnmount() {
  // Remember state for the next mount
  state = this.state;
}

onClick(e) {
  e.preventDefault();
  this.setState(prev => ({ counter: prev.counter + 1 }));
}

render() {
  return (
    <div>
      <span>{ this.state.counter }</span>
      <button onClick={this.onClick}>Increase</button>
    </div>
  );
 }
}

export default Counter;

import React，{Component，PropTypes}来自'React'；
//设置初始状态
让状态={counter:5}；
类计数器扩展组件{
建造师（道具）{
超级（道具）；
//检索最后一个状态
this.state=状态；
this.onClick=this.onClick.bind（this）；
}
组件将卸载（）{
//记住下一次装载的状态
state=this.state；
}
onClick（e）{
e、 预防默认值（）；
this.setState（prev=>（{counter:prev.counter+1}））；
}
render（）{
返回(
{this.state.counter}
增加
);
}
}
导出默认计数器；

当您想在以后重新填充数据时，保存数据的最佳方法是将其保存在

本地存储中，这样即使在刷新应用程序后也可以获取数据

const InitialState = {
   someState: 'a'
}
class App extends Component {

 constructor(props) {
  super(props);

  // Retrieve the last state
  this.state = localStorage.getItem("appState") ? JSON.parse(localStorage.getItem("appState")) : InitialState;

}

componentWillUnmount() {
  // Remember state for the next mount
  localStorage.setItem('appState', JSON.stringify(this.state));
}

render() {
  ...
 }
}

export default App;

您的问题是导航时组件正在卸载

您可以将视频状态提升到不会卸载的组件

或

如果您避免重复，并且根据您处理导航的方式，您可以始终安装视频容器，如果路径匹配，则会呈现
视频
，否则如果您希望在浏览器级别（客户端）保存数据（复杂数据类型），它将返回
null
，您可以使用IndexDb，它现在与大多数现代浏览器兼容。
IndexDB提供事务和索引功能，用于在浏览器级别保存和获取数据。这是异步的。
请按照此链接获取有关浏览器缓存的更多详细信息