# SessionStorage
# Parameters
import { useSessionStorage } from "vue-composable";
const SessionStorage = useSessionStorage(key, defaultValue?, sync?);
Parameters | Type | Required | Default | Description |
---|---|---|---|---|
key | string, ref<string> | true | Key that will be used to store in SessionStorage | |
defaultValue | object | false | undefined | default value stored in the SessionStorage |
sync | Boolean | false | true | sets the storage to sync automatically between tabs |
# State
The useSessionStorage
function exposes the following reactive state:
import { useSessionStorage } from "vue-composable";
const { supported, storage } = useSessionStorage(key);
State | Type | Description |
---|---|---|
supported | boolean | returns true is SessionStorage is available |
storage | Ref<any> | handler with SessionStorage value |
# Methods
The useSessionStorage
function exposes the following methods:
import { useSessionStorage } from "vue-composable";
const { remove, clear, setSync } = useSessionStorage(key);
Signature | Description |
---|---|
remove() | Removes key from the SessionStorage, equivalent as storage.value = undefined |
clear() | Clears all used SessionStorage used so far |
setSync(boolean) | Does nothing, since the session is only available on the tab, this is here to allow the same API as useLocalStorage . Returns false |
# Example
sessionStorage: 1
supported: false
Check the value in the dev tools: `__vue_sessionStorage_example`
# Code
<template>
<div>
sessionStorage: {{ storage }}
<p>
supported:
<b :class="{ green: supported, red: !supported }">{{ supported }}</b>
</p>
<p>
<b>Check the value in the dev tools: `{{ key }}`</b>
</p>
<label for="storage">
<input name="storage" v-model="storage" />
</label>
<div>
<button @click="remove">Remove</button>
</div>
</div>
</template>
<script>
import { useSessionStorage } from "vue-composable";
import { ref, watch } from "@vue/composition-api";
export default {
name: "session-storage-example",
setup() {
const key = "__vue_sessionStorage_example";
const tabSync = ref(false);
const { supported, storage, remove } = useSessionStorage(key, 1);
return {
key,
supported,
tabSync,
storage,
remove,
};
},
};
</script>
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
# Notes
This uses WebStorage, if access to the internal store is required, use useWebStorage('sessionStorage').store
to access it.