原题链接 (opens new window)

题目

<script setup lang='ts'>

import { ref } from "vue"

/**
 * 实现`useLocalStorage`函数
*/
function useLocalStorage(key: string, initialValue: any) {
  const value = ref(initialValue)

  return value
}

const counter = useLocalStorage("counter", 0)

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

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

counter.value = 1

</script>

分析

这个题目要求我们通过变量counter的getter方法获取本地存储的值, 以及通过变量counter的setter方法设置本地存储的值, 所以useLocalStorage函数返回的counter应该是一个对象, 对象里面有getterhe setter两个属性, 属性的方法用来用来读取本地存储的变量

解决

<script setup lang='ts'>

import { ref,computed } from "vue"

/**
 * Implement the composable function
 * Make sure the function works correctly
*/
function useLocalStorage(key: string, initialValue: any) {
  const value = ref(initialValue);
  localStorage.setItem(key,initialValue);
  const counter = computed({
    get:()=> {
      value.value = localStorage.getItem(key);
      return value.value;
    },
    set:(val)=> {
      localStorage.setItem(key,val);
      value.value = val
    }
  })
  return counter
}

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>

可以看到, 我们通过点击更新按钮, 先会调用getter函数获取本地存储的值, 接着调用setter函数, 在原来值的基础上加1然后存储到本地, 完成更新