实现本地存储函数useLocalStorage

我们经常需要使用 LocalStorage API,一个好用的可组合函数封装将帮助我们更好地使用它,让我们开始吧 👇:

TypeScript 复制代码
<script setup lang='ts'>

import { ref, watch } from "vue"

/**
 * Implement the composable function
 * Make sure the function works correctly
*/
function useLocalStorage(key: string, initialValue: any) {
  const value = ref(initialValue)
  watch(value,(val)=>{
    localStorage.setItem(key,val)
  },{
    immediate:true
  })
  return value
}

const counter = useLocalStorage("counter", 0)

// We can get localStorage by triggering the getter:
console.log(counter.value)

// And we can also set localStorage by triggering the setter:

const update = () => counter.value++

</script>

<template>
  <p>Counter: {{ counter }}</p>
  <button @click="update">
    Update
  </button>
</template>

其中的watch可以修改为以下方式:

TypeScript 复制代码
watchEffect(() => {
    localStorage.setItem(key, value.value)
})

// watchEffect自动添加了immediate:true

watchEffect:立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行。

watchEffect的特点可以查看watchEffect()和effectScope()-CSDN博客

相关推荐
k09333 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
神奇夜光杯11 分钟前
Python酷库之旅-第三方库Pandas(202)
开发语言·人工智能·python·excel·pandas·标准库及第三方库·学习与成长
Themberfue13 分钟前
Java多线程详解⑤(全程干货!!!)线程安全问题 || 锁 || synchronized
java·开发语言·线程·多线程·synchronized·
plmm烟酒僧15 分钟前
Windows下QT调用MinGW编译的OpenCV
开发语言·windows·qt·opencv
EricWang135825 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning25 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
测试界的酸菜鱼27 分钟前
Python 大数据展示屏实例
大数据·开发语言·python
web行路人35 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00136 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
晨曦_子画36 分钟前
编程语言之战:AI 之后的 Kotlin 与 Java
android·java·开发语言·人工智能·kotlin