vueposu

useLocalStorage

Reactive localStorage.

  • You can storage Array and PlainObject.
  • You can use localStorage.setItem directly, it will effects and changes the localStorage item's value.
  • It will sync the localStorage item value when the page focus.

Usage

name:

type: 

{
  "value": null
}

<template>
  <div>
    <p>name: <input v-model="state.name" /></p>
    <p>type: <input v-model="state.type" /></p>
    <p><pre lang="json">{{JSON.stringify(state, null, 2)}}</pre></p>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import { useLocalStorage } from "vueposu";

export default {
  setup() {
    const state = useLocalStorage('useLocalStorage-demo-state', {
      name: 'Tom',
      type: 'Cat'
    });

    return {
      state
    }
  },
};
</script>

Return

PropertyTypeDescription
itemValueRef<T>the localStorage item's value

Params

PropertyTypeRequiredDefaultDescription
keystringtrue-the localStorage item's key name
defaultValueTfalsenullthe defualt localStorage item's value