如何将密钥保存在本地存储中，以便稍后返回 ReactJS 中的页面时检索

Question

• 我有一个页面，我想保存密钥以供以后检索。此键用于确定轮播中最后选择的活动项目。在 ReactJS 中使用本地存储需要做什么？

import React, { Fragment, Component } from 'react'
import { truncateString } from '@helpers'
import './styles.css'
class RoutineSidebar extends Component {
handleOnClick = key => {
const { currentSlideKey } = this.props;
const isExerciseDone = this.props.skipExerciseValidation(currentSlideKey);
if(isExerciseDone || key < this.props.currentSlideKey) {
if(this.props.skipExerciseValidation(key === 0 ? 0 : key - 1)) {
this.props.setKey(key);
}
} else {
if(key === this.props.currentSlideKey + 1) {
this.props.openSkipExerModal(); 
}
}
React.useEffect(() => {
localStorage.setItem('selectedRoutine', key);
}, [key]);
}
checkExerciseStatusSkipped = key => {
const { routineList } = this.props;
return routineList[key].skipped;
};
checkExerciseStatusDone = key => {
const { routineList } = this.props;
return routineList[key].done;
}
checkExercisesSelected = key => {
const { routineList } = this.props;

return routineList[key];
}
render() {
const { exercises, currentSlideKey } = this.props;
const todaysRoutineThumbnails = exercises.map((exercise, key) => {
return (
<div key={key} onClick={() => this.handleOnClick(key)} className={key === currentSlideKey ? 'thumbnail-container selected-exercise' : 'thumbnail-container'}>
<div className="row todays-routine">
<div className="col-sm-6">
{
this.checkExerciseStatusSkipped(key) ? <Fragment><i className="fas fa-times-circle status-indicator-warning" />
<div className="scThumb">
<img className='active-thumbnail img-opaque' alt="todays-routine-thumbnail" src={exercise.thumbnail} />
</div>
</Fragment>
: this.checkExerciseStatusDone(key) ? <Fragment><i className="fas fa-check-circle status-indicator-done" />
<div className="scThumb">
<img className='active-thumbnail img-opaque' alt="todays-routine-thumbnail" src={exercise.thumbnail} />
</div>
</Fragment>
: !this.checkExerciseStatusDone(key) && !this.checkExerciseStatusSkipped(key) && <Fragment><div className="routine-exercise-counter">{key + 1}</div><div className="scThumb">
<img className='active-thumbnail' alt="todays-routine-thumbnail" src={exercise.thumbnail} />
</div>
</Fragment>    
}                            
</div>
<div className="col-sm-6">    
<div className="thumbnail-info clearfix">
<p className="thumbnail-title">{truncateString(exercise.exerciseName, 30)}</p>
<p className="thumbnail-description">This is the best exercise for back pain ever made</p>
</div>
</div>    
</div>    
</div>
)
})
return (
<div className="todays-routine-container">
<h1>{this.props.header}</h1>                
{todaysRoutineThumbnails} 
</div>
)
}
}
export default RoutineSidebar;

Answer 1

不能在基于类的组件中使用useEffect挂钩。

要将 localStorage 与 React 一起使用，您不需要任何东西，只需直接使用它即可。

我想如果你用这个代码替换了你的useEffect代码，它会正常工作。

setTimeout(() => {
window.localStorage.setItem("selectedRoutine", key);
}, 0);

Answer 2

只需要为这种 comman 用法创建一个 util.js 文件并粘贴下面的代码并通过导入来使用这些函数。

export const getLocalStorage = (key) => {
const localStorageData = localStorage.getItem(key);
if (localStorageData) {
return JSON.parse(localStorageData);
} else {
return null;
}
}
export const setLocalStorage = (key, value) => {
if (key && value) {
localStorage.setItem(key, JSON.stringify(value));
}
}

Answer 3

请尝试这个

import React, { Fragment, Component } from 'react'
import { truncateString } from '@helpers'
import './styles.css'
class RoutineSidebar extends Component {
constructor(props){
super(props);
this.setState={
activeCarouselItem: ""
}
}
componentDidMount(){
this.setState({
activeCarouselItem: localStorage.getItem('selectedRoutine')?localStorage.getItem('selectedRoutine'): ""
})
}
handleOnClick = key => {
const { currentSlideKey } = this.props;
const isExerciseDone = this.props.skipExerciseValidation(currentSlideKey);
if(isExerciseDone || key < this.props.currentSlideKey) {
if(this.props.skipExerciseValidation(key === 0 ? 0 : key - 1)) {
this.props.setKey(key);
}
} else {
if(key === this.props.currentSlideKey + 1) {
this.props.openSkipExerModal(); 
}
}
// React.useEffect(() => {
// localStorage.setItem('selectedRoutine', key);
// }, [key]);
this.setState({activeCarouselItem: key })
}
checkExerciseStatusSkipped = key => {
const { routineList } = this.props;
return routineList[key].skipped;
};
checkExerciseStatusDone = key => {
const { routineList } = this.props;
return routineList[key].done;
}
checkExercisesSelected = key => {
const { routineList } = this.props;

return routineList[key];
}
render() {
const { exercises, currentSlideKey } = this.props;
const todaysRoutineThumbnails = exercises.map((exercise, key) => {
return (
<div key={key} onClick={() => this.handleOnClick(key)} className={key === currentSlideKey ? 'thumbnail-container selected-exercise' : 'thumbnail-container'}>
<div className="row todays-routine">
<div className="col-sm-6">
{
this.checkExerciseStatusSkipped(key) ? <Fragment><i className="fas fa-times-circle status-indicator-warning" />
<div className="scThumb">
<img className='active-thumbnail img-opaque' alt="todays-routine-thumbnail" src={exercise.thumbnail} />
</div>
</Fragment>
: this.checkExerciseStatusDone(key) ? <Fragment><i className="fas fa-check-circle status-indicator-done" />
<div className="scThumb">
<img className='active-thumbnail img-opaque' alt="todays-routine-thumbnail" src={exercise.thumbnail} />
</div>
</Fragment>
: !this.checkExerciseStatusDone(key) && !this.checkExerciseStatusSkipped(key) && <Fragment><div className="routine-exercise-counter">{key + 1}</div><div className="scThumb">
<img className='active-thumbnail' alt="todays-routine-thumbnail" src={exercise.thumbnail} />
</div>
</Fragment>    
}                            
</div>
<div className="col-sm-6">    
<div className="thumbnail-info clearfix">
<p className="thumbnail-title">{truncateString(exercise.exerciseName, 30)}</p>
<p className="thumbnail-description">This is the best exercise for back pain ever made</p>
</div>
</div>    
</div>    
</div>
)
})
return (
<div className="todays-routine-container">
<h1>{this.props.header}</h1>                
{todaysRoutineThumbnails} 
</div>
)
}
}
export default RoutineSidebar