SessionStorage

SessionStorage (opens new window).

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.