Introduction
Today I just want to add common operations in the React component. What I want to do today is to practice the local storage and the windows event.
Register a scroll event
- We can register the windows event in useEffect hooks.
const Content = () => {
const [style, setStyle] = useState('sidebar1')
React.useEffect( ()=>{
window.addEventListener('scroll', handleScroll);
}, []);
const handleScroll = e => {
const winScroll =
document.body.scrollTop || document.documentElement.scrollTop
if(winScroll < 100) {
setStyle('sidebar1')
} else {
setStyle('sidebar1 sidebar2')
}
}
return (
<Fragment>
...
</Fragment>
)
}
Local storage
- Local storage is one of new features of HTML 5. Users can store data in the browser until delete the local storage manually up to 5 MB. One of the differences between cookie and local storage is that the local storage won't be sent to server-side.
- The format of key and value are string
const Content = () => {
const [num, setNum] = useState(0)
const add = e => {
setNum(num + 1)
localStorage.setItem('num', num + 1)
}
const remove = e => {
if (num > 0) {
setNum(num - 1)
localStorage.setItem('num', num - 1)
}
}
React.useEffect( ()=>{
var localNum = localStorage.getItem('num')
if (localNum !== null) {
setNum(localNum)
}else{
setNum(0)
}
}, []);
return (
<Fragment>
<div className={style}>
({num}) Menu
</div>
<Menu add={add} remove={remove}/>
</Fragment>
)
}
That's it!
Implementations
Articles
There are some of my articles. Feel free to check if you like!
- My blog-posts for software developing: https://medium.com/a-layman
- My web resume: https://jenhsuan.github.io/ALayman/cover.html
- Facebook page: https://www.facebook.com/imalayman
Top comments (0)