localStorage is not defined NextJS
// components
function Storage(props) {
const LocalStorage = ({ type, keys, value, onLocalStorage }) => {
switch (type) {
case 'set':
keys !== undefined && window.localStorage.setItem(keys, value)
break
case 'get':
keys !== undefined && onLocalStorage(window.localStorage.getItem(keys))
break
case 'remove':
keys !== undefined && window.localStorage.removeItem(keys)
break
case 'clear':
keys !== undefined && window.localStorage.clear()
break
default:
alert('localStorage type undefined')
break
}
}
return <div>{LocalStorage(props)}</div>
}
export default Storage
// pages component
import dynamic from 'next/dynamic'
const LocaStorage = dynamic(() => import('../components/Storage'), { ssr: false })
function Home() {
const getLocalStorage = (val) => console.log(val)
return (
<>
<LocaStorage type={'set'} keys={'name'} value={'My name is restu wahyu saputra'} />
<LocaStorage type={'get'} keys={'name'} onLocalStorage={getLocalStorage} />
</>
)
}
export default Home