Local-Storage not updating react js - reactjs

Question

I'am building a blog website with React ,and in the home page we can find list of posts,when the user clicks on the post he can see and read the post and comments etc...,i think the idea is just like this website (stackoverflow) where u can see a list of questions and hence u click one of them u will see the full question.
At this moment everything is well but hence i refresh the page data lost ,for that i tried to use local-storage,after i used local-stortage i refresh the page => the data persist and that's good.
And now the problem is when i back to the home page and click on another post it shows the same post every time and that's because of the local storage which not updating.
My Question: how can i update the local storage hence i click other post.
and the code is bleow:
Home.js:
import './Home.css';
import {Link} from 'react-router-dom';
import {Button} from 'react-bootstrap';
import Posts from '../Posts/Posts';
class Home extends React.Component{
constructor(props){
super(props);
this.state={
arrayposts:[],
}
}
getposts=()=>{
fetch('http://localhost:3002/')
.then(response=>response.json())
.then(data=>{
console.log(data)
this.setState({arrayposts:data});
}).catch(err=>console.log("can't get posts"))
}
componentDidMount(){
this.getposts();
}
render()
{
const {arrayposts}=this.state;
return(
<div >
<div className='topquestion' >
<h4>Top Questions</h4>
<Link to={'/Askquestion'}><Button id='askbtn'>Ask Question</Button></Link>
</div>
{
arrayposts.map((post,i)=>{
return (
<Posts
key={i}
postcontent={arrayposts[i].postcontent}
postid={arrayposts[i].id}
title={arrayposts[i].title}
postdate={arrayposts[i].postdate}
/>
);
})
}
</div>
);
}
}
export default Home;
Post.js:
import React from 'react';
import './Posts.css';
import {Link} from 'react-router-dom';
class Posts extends React.Component{
constructor(props){
super(props);
this.state={
title:this.props.title,
postid:this.props.postid,
content:this.props.postcontent,
postdate:this.props.postdate
}
}
render()
{
const {postcontent,title,postdate,postid}=this.props
return(
<div className='post'>
<Link id='title' to={{
pathname: "/Articles",
postcontent:postcontent,
postid:postid,
title:title
}}>{title} </Link>
<div className='reaction'>
<div id='like'><img alt='' src={require('./like.png')}width='24' height='24'/>reactions</div>
<div id='comment'><img alt='' src={require('./comment.png')}width='24' height='24'/>Add comment</div>
</div>
</div>
);
}
}
export default Posts;
Article.js:
import React from 'react';
import './Articles.css' ;
import {Link } from 'react-router-dom';
import localstorage from 'local-storage';
class Articles extends React.Component{
constructor(props){
super(props);
this.state={
title:'',
comment:'',
postid:this.props.location.postid,
arraycomments:[],
postcontent:this.props.location.postcontent
}
}
onchangecomment=(event)=>{
this.setState({comment:event.target.value});
}
addcomment=()=>{
fetch('http://localhost:3002/Addcomment',{
method:'post',
headers:{'Content-Type':'application/json'},
body:JSON.stringify({
comment:this.state.comment,
postid:this.state.postid
})
}).then(resposne=>{})
.catch(err=>{console.log('not added from the quesiotns')})
document.getElementById('txtarea').value='';
}
getcomments=()=>{
fetch('http://localhost:3002/getcomment',{
method:'post',
headers:{'Content-Type':'application/json'},
body:JSON.stringify({
postid:this.state.postid
})
})
.then(response=>response.json())
.then(response=>{
console.log(response)
this.setState({arraycomments:response})
})
.catch(err=>{console.log('not getting ')})
}
componentWillMount(){
localstorage.get('postid') && this.setState({postid:JSON.parse(localstorage.get('postid'))})
localstorage.get('postcontent') && this.setState({postcontent:JSON.parse(localstorage.get('postcontent'))})
localstorage.get('arraycomments') && this.setState({arraycomments:JSON.parse(localstorage.get('arraycomments'))})
localstorage.get('title') && this.setState({title:JSON.parse(localstorage.get('title'))})
}
componentDidMount(){
this.getcomments();
}
componentWillUpdate(nextProps,nextState){
localstorage.set('postid',JSON.stringify(nextState.postid));
localstorage.set('postcontent',JSON.stringify(nextState.postcontent));
localstorage.set('arraycomments',JSON.stringify(nextState.arraycomments));
localstorage.set('title',JSON.stringify(nextState.title));
}
render()
{
const {postcontent}=this.state;
return(
<div className='article'>
<div dangerouslySetInnerHTML={{ __html:postcontent }} />
<h4>Discussion</h4>
<div className='submitcommentform'>
<textarea id='txtarea' placeholder='Add discussion'
onChange={this.onchangecomment}
style={{height:'127px', width:'687px',padding:'6px 6px'}}>
</textarea>
<div className='submit-wrapper-actions'>
<Link to='' ><img className='wrapperimgage' src='https://practicaldev-herokuapp-com.freetls.fastly.net/assets/info-b2ce6a88ddd367e1416cd4c05aab2edee2d0b2c355d7b2aae1821eec48014e11.svg' height='21px'/></Link>
<Link to='' ><img className='wrapperimgage' src='https://practicaldev-herokuapp-com.freetls.fastly.net/assets/image-upload-f5242154f76102fa8869623b3d54adbeecbf24989ba8546e4f8ce229acec2c82.svg' height='21px'/></Link>
<button id='btnsubmit'onClick={this.addcomment}>Submit</button>
</div>
</div>
<div>
{
this.state.arraycomments.map((post,i)=>{
return (
<div className='commentsection' key={i}>{post.comm_content}</div>
);
})
}
</div>
</div>
);
}
}
export default Articles;
I hope that my question is clear.