javascript 如何在没有 redux 的情况下缓存获取的数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49574285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to cache fetched data in react without redux
提问by Den Gas
I know, using ReduxI have common storeand when I change my location, for example I went from /videospage, but I still have fetched videos in my videosreducer. So if I then decide to go back to my videospage I show user already loaded videos from my store, and will load more if he needs and store them.
我知道，使用ReduxI have commonstore并且当我改变我的位置时，例如我从/videos页面转到，但我仍然在我的videos减速器中获取了视频。因此，如果我随后决定返回我的videos页面，我会向用户显示已从我的商店加载的视频，如果他需要并存储它们，则会加载更多视频。
But in Reactwithout Reduxif I change my location /videoswhere I fetched some videos and then stored them in my local state of my VideosPagecomponent and then went back to this page, I have no videos anymore and should fetch them from scratch.
但是，在React没有Redux如果我改变我的位置/videos，我获取了一些视频，然后保存他们在我的地方我的状态VideosPage组件，然后回到这个页面，我没有了影片，应该从头开始获取它们。
How can I cache them and is it possible at all?
我如何缓存它们，是否有可能？
PS: This is more theoreticalquestion so no code provided.
PS：这是更多的theoretical问题，所以没有提供代码。
采纳答案by Shubham Khatri
The best way to save data when you want to repopulate it at a later point of time is to save it in localStorage, which allows you to get the data even after refreshing the app
当您想在以后重新填充数据时保存数据的最佳方法是将其保存在 中localStorage，这样即使在刷新应用程序后也可以获取数据
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;
回答by tarzen chugh
You can cache with:-
您可以缓存：-
1) Local Storage
1) 本地存储
2) Redux Store
2) Redux 商店
3) Keep data between mouting and unmounting
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;
回答by Eric Hasselbring
Your issue is that the component is unmounting when you navigate.
您的问题是导航时组件正在卸载。
You can lift the video state up to a component that won't unmount.
您可以将视频状态提升到不会卸载的组件。
or
或者
If you are avoiding redux and depending on how you are handling navigation you can always have your video container mounted and if the route matches it renders videosotherwise it returns null.
如果您避免使用 redux 并且根据您处理导航的方式，您可以始终安装视频容器，如果路由匹配，则渲染，videos否则返回null。
回答by dush88c
If you want to save data (complex data type) in browser level (client-side), You can use IndexDb which is now compatible in most modern browsers. IndexDB provides the transactional and index feature to save and fetch data at the browser level. And which is asynchronous. Please follow this link to get more details of browser caching.
如果您想在浏览器级别（客户端）保存数据（复杂数据类型），您可以使用 IndexDb，它现在与大多数现代浏览器兼容。IndexDB 提供了事务和索引功能来在浏览器级别保存和获取数据。这是异步的。请点击此链接以获取有关浏览器缓存的更多详细信息。
