我们经常需要使用 LocalStorage API，一个好用的可组合函数封装将帮助我们更好地使用它，让我们开始吧 👇:
<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可以修改为以下方式：
watchEffect(() => {
localStorage.setItem(key, value.value)
})
// watchEffect自动添加了immediate:truewatchEffect：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。文章来源：https://www.toymoban.com/news/detail-819337.html
watchEffect的特点可以查看watchEffect()和effectScope()-CSDN博客文章来源地址https://www.toymoban.com/news/detail-819337.html
到了这里，关于实现本地存储函数useLocalStorage的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
