Local Storage
This composable provides an easy way to add and retrieve data from the native Storage API. Provide a key and initial value, and call setValue to update its value. Enable sync to retrieve stored data when the component is mounted.
Saved Data:
import { TCard, TCell, TDivider, TInputText, TInputTextController, TText } from "@dija/tohama-components";
import { useLocalStorage } from "@dija/tohama-use";
import { defineComponent } from "vue";
export default defineComponent({
setup() {
const user = useLocalStorage<{ name: string }>({
key: "tohama-use-local-storage",
initialValue: { name: "New user" },
sync: true,
});
return () => (
<TCell>
<TText>Saved Data:</TText>
<TCard design="outlined" p>
<TText>Name: </TText>
<TText>{JSON.stringify(user.value.value)}</TText>
</TCard>
<TDivider my />
<TInputText
label="Name"
controller={TInputTextController.create({
value: user.value.value?.name,
onUpdate: ({ controller }) => {
user.setValue({ name: controller.value ?? "New user" });
},
})}
/>
</TCell>
);
},
});