# Storage
LocalStorage but falls back if not supported to SessionStorage
# Notes
Use this if you don't want to handle Private Browsing / Incognito modes (opens new window) caveats.
This is recommended if you want to support safari users using private mode.
# Example
storage: 1
supported: false
Check the value in the dev tools: `__vue_storage_example`
Sync supported: true
Enable tab sync?
# Code
<template>
<div>
storage: {{ 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>
<p>Sync supported: {{ supportedSync }}</p>
<p>Enable tab sync? <input type="checkbox" v-model="tabSync" /></p>
<p v-if="tabSync">
Now this tab is listening for changes, please change the storage value
in other tab
</p>
</div>
<div>
<button @click="remove">Remove</button>
</div>
</div>
</template>
<script>
import { useLocalStorage, useStorage } from "vue-composable";
import { ref, watch } from "@vue/composition-api";
export default {
name: "storage-example",
setup() {
const key = "__vue_storage_example";
const tabSync = ref(false);
const supportedSync = ref(true);
const { supported, storage, setSync, remove } = useStorage(key, 1);
watch(tabSync, s => {
if (setSync(s) === false) {
supportedSync.value = false;
}
});
return {
key,
supported,
supportedSync,
tabSync,
storage,
remove
};
}
};
</script>