useStorage

同步数据到Localstorge

import React,{useState,useEffect} from 'react'
import { useCallback } from 'react'
export default function useStorage(key,defaultValue,keepWindowClosed){
// key:存储的key
// default；默认的值
// keepWindowClosed；窗口关闭之后是否继续保存
    const storage=keepWindowClosed?window.localStorage:window.sessionStorage

    const getStorageValue=()=>{
        try{
            const storageValue=storage.getItem(key)
            if(storageValue!=null){
                return JSON.parse(storageValue)
            }else if(defaultValue){
                const value=typeof defaultValue=='function'?defaultValue():defaultValue
                storage.setItem(JSON.stringify(value))
                return value
            }
        }catch(err){
            console.log(`useStorage 无法获取到${key}:`,err)
        }
        return undefined
    }

    const [value,setValue]=useState(getStorageValue())

    // 更新组件状态并保存到storage
    const save=useCallback((value)=>{
        setValue(prev=>{
            const finalValue=typeof value==='function'?value():value
            storage.setItem(key,JSON.stringify(finalValue))
            return finalValue
        })
        console.log(value)
    })

    // 清除状态
    const clear=useCallback(()=>{
        storage.removeItem(key)
        setValue(undefined)
    },[])
    return [value,save,clear]
}