18 - 实现本地存储函数

[yshinu]

<script setup lang='ts'>

import {ref, watchEffect,watch} from "vue"

/**
 * 实现`useLocalStorage`函数
 */
function useLocalStorage(key: string, initialValue: any) {
    const value = ref(localStorage.getItem(key)??initialValue)
    watch(value,(newValue,oldValue)=>{
          localStorage.setItem(key,newValue)
    })

    return value
}

const counter = useLocalStorage("counter", 0)

// 我们可以通过触发`counter`的`getter`来获取本地存储的值
console.log(counter.value)

// 同样地,我们也可以通过触发`counter`的`setter`来设置本地存储的值

const update = () => counter.value++;
</script>
<template>
    <p>Counter: {{ counter }}</p>
    <button @click="update">Update</button>
</template>