18 - 实现本地存储函数

[wuyuan00]

<script setup lang="ts">
import { ref, watch } from 'vue';
function useLocalStorage(key: string, initialValue: any) {
  const value = ref(
    JSON.parse(localStorage.getItem(key) as any) || initialValue
  );
  localStorage.setItem(key, JSON.stringify(value.value));
  watch(value, (num) => localStorage.setItem(key, JSON.stringify(num)));
  return value;
}
const counter = useLocalStorage('counter', 0);
console.log(counter);
const update = () => counter.value++;
</script>

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