18 - 实现本地存储函数

[Gorvey]

<script setup lang="ts">
import { ref, watch, computed } from 'vue';

/**
 * Implement the composable function
 * Make sure the function works correctly
 */
function useLocalStorage(key: string, initialValue: any) {
  let value = ref(initialValue);
  const read = () => {
    const rawValue = localStorage.getItem(key);
    if (rawValue != null) {
      value.value = ref(Number(rawValue));
    }
  };
  read();
  watch(
    () => value.value,
    () => {
      localStorage.setItem(key, value.value);
    }
  );
  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>