实现本地存储函数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博客

相关推荐
王解几秒前
一篇文章读懂 Prettier CLI 命令:从基础到进阶 (3)
前端·perttier
军训猫猫头2 分钟前
44.扫雷第二部分、放置随机的雷,扫雷,炸死或成功 C语言
c语言·开发语言
北巷!!3 分钟前
宇信科技JAVA笔试(2024-11-26日 全部AK)
java·开发语言·科技
ᝰꫝꪉꪯꫀ3614 分钟前
JavaWeb——SpringBoot原理
java·开发语言·后端·springboot
乐闻x6 分钟前
最佳实践:如何在 Vue.js 项目中使用 Jest 进行单元测试
前端·vue.js·单元测试
Octopus20777 分钟前
【C++】读取数量不定的输入数据
开发语言·c++·笔记·学习
忘梓.7 分钟前
C嘎嘎探索篇:栈与队列的交响:C++中的结构艺术
c语言·开发语言·c++·
Chris _data18 分钟前
如何提升编程能力第二篇
开发语言·青少年编程
遇到困难睡大觉哈哈18 分钟前
JavaScript面向对象
开发语言·javascript·ecmascript
十五年专注C++开发20 分钟前
C++中的链式操作原理与应用(一)
开发语言·c++·设计模式