自定义hooks之useLocalStorage实现

为什么封装

首先说我们想实现的效果。在js中如果我们要将一些数据储存到localstorage中,需要先创建或取出对应的数据，并转化为对象更改后，再转化为字符串存入，如下

 const jsonValue = localStorage.getItem(key)
  if (jsonValue == null) {
      localStorage.setItem(key,'{}')//如果空，就存入想存的数据
  } else {
     jsonValue=JSON.parse(jsonValue)
     jsonValue.name='xxx'  //更改name属性
     localStorage.setItem(key,JSON.stringify(jsonValue))//存入
  }

如果存入操作较多，写着就比较麻烦，这个时候是我们就可以自定义一个hooks方便操作。

作用效果

可以快捷创捷或修改key和数据，并且将其与react的state绑定、

实现过程

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(
  //这个箭头函数是判断有无对应的key的值，
  //无就把想要的initialValue给value，有的话就将值取出来给value
  () => {
    const jsonValue = localStorage.getItem(key)
    if (jsonValue == null) {
      if (typeof initialValue === "function") {
        return initialValue()
      } else {
        return initialValue
      }
    } else {
      return JSON.parse(jsonValue)
    }
  })

  useEffect(() => {//视图更新后将value的值存入localStorage，
                   //value改变后再次执行。
    localStorage.setItem(key, JSON.stringify(value))
  }, [value, key])

  return [value, setValue]
}

一些思考

或许我们会想为什么我们要封装成hooks，而不是普通的工具类函数呢？工具类函数一样可以快捷存储和取出。但是，如果我们要马上用刚刚的一些数据，我们要再次取数据，并且操作视图更新。而封装成hooks直接就可以更新视图，比较方便。