Local Storage

You can retrieve, set, and store shared state using the browser's Local Storage.

URI local-storage://{**name}
Path

Specify the key string for the value. If a slash (/) is included, the entire string will be used as the key.

Example local-storage://basic/test

ViewState

Primitive data

Specify the LocalStorage URI in the src attribute to share state across multiple components.

Ensure that the values are retained even after refreshing the browser.

vue
<template>
 <ViewState
  v-slot="example"
  src="local-storage://example"
 >
  <b-input :state-src="example" />
  {{ example.data }}
 </ViewState>
</template>

Object data

When using an object as a data value, please note that a null check for the data is necessary, and you need to use the Set method to update it.

  
vue
<template>
 <ViewState
  v-slot="example"
  src="local-storage://example-object"
 >
  <b-input
   :state-src="example"
   state-path="key1"
  />
  <b-input
   :state-src="example"
   state-path="key2"
  />
  <JsonView :data="example.data" />
 </ViewState>
</template>

Default data

If default values are needed, please register them as a new protocol in nuxt.config.ts.

"Default Value"
  
vue
<template>
 <ViewState
  v-slot="key1"
  src="session-storage://example-default-object"
  :data="{ key1: 'Default Value' }"
  path="key1"
 >
  <b-input :state-src="key1" />
  <JsonView :data="key1.data" />
 </ViewState>
</template>