Vueuse useSessionStorage 是对原生js的sessionStorage进行的封装,实现了响应式的Session本地存储,sessionStorage可以把数据存储在浏览器端,当关闭网页时数据会自动清除,而localStorage是永久存储在浏览器中,那么VueUse对这两原生方法做了响应式封装。
import { useSessionStorage } from '@vueuse/core'
// 响应式对象
const state = useSessionStorage('key-store', { id: 100, url: 'https://www.itxst.com' })
// 绑定 boolean
const flag = useSessionStorage('key-flag', true) // returns Ref<boolean>
// 绑定数字
const count = useSessionStorage('key-count', 0) // returns Ref<number>
// 修改对象
state.value.id=200;
flag.value=false;
// 删除本地存储
state.value = null;
flag.value=null;
例子
默认情况如果你写入的key已经存在本地存储中,useSessionStorage是不会合并你新对到本地存储里面,而是以绑定存储对基准数据
import { useSessionStorage } from '@vueuse/core';
//用原生方法写入数据
localStorage.setItem('key_user', '{"id":222}')
//用useStorage绑定对象
const userInfo = useSessionStorage('key_user', { id: 1, url: 'https://www.itxst.com' });
//输出结果为undefined,因为默认不会合并已存在的数据
console.log(userInfo.value.url);
设置mergeDefaults:true
可以对已经存在数据进行浅合并
import { useSessionStorage } from '@vueuse/core';
//用原生方法写入数据
localStorage.setItem('key_user', '{"id":222}')
//用useSessionStorage绑定对象
const userInfo = useSessionStorage('key_user', { id: 1, url: 'https://www.itxst.com' }, { mergeDefaults: true });
//输出结果为 https://www.itxst.com,合并了已存在的数据
console.log(userInfo.value.url);
设置mergeDefaults:true
是浅合并,你可以自定义函数进行深合并
import { useSessionStorage } from '@vueuse/core';
//用原生方法写入数据
localStorage.setItem('key_user', '{"id":222}')
//用useSessionStorage绑定对象
const userInfo = useSessionStorage('key_user',
{ id: 1, url: 'https://www.itxst.com' },
{ mergeDefaults: (storageValue, defaults) => deepMerge(defaults, storageValue) });
//deepMerge为你自定义的深度合并函数
useSessionStorage将根据提供的序列化方法。比如JSON.stringify/JSON.parse将用于对象,Number.toString/parseFloat将用于数字等。
import { useSessionStorage} from '@vueuse/core'
const item=useSessionStorage(
'key',
{},
{
serializer: {
read: (v: any) => v ? JSON.parse(v) : null,
write: (v: any) => JSON.stringify(v),
},
}
)
当您提供null作为默认值时,useSessionStorage无法推导数据类型,在这种情况下,您可以提供StorageSerializers对象类型告诉我们如何初始化。
import { useSessionStorage,StorageSerializers } from '@vueuse/core';
const userInfo = useSessionStorage('key_user', null, { serializer: StorageSerializers.object })
userInfo.value = { foo: 'bar' }
const num = useSessionStorage('key_user', null, { serializer: StorageSerializers.number })
num.value =100
<template>
<div>
<pre>{{ userInfo }}</pre>
<button @click="edit">
点击试试看
</button>
<button @click="del">
删除
</button>
</div>
</template>
<script setup lang="ts">
/*
vueuse 中文文档
https://www.itxst.com/vueuse/tutorial.html
*/
import { useSessionStorage } from '@vueuse/core'
//响应Session式存储
const userInfo = useSessionStorage('key_user', { id: 1, url: 'https://www.itxst.com' })
//修改Session存储
const edit = () => {
if (!userInfo.value) {
alert('对象已经被你删除了')
return;
}
userInfo.value.id++;
}
//删除Session存储
const del = () => {
userInfo.value = null;
}
</script>
<style scoped>
.pagex {
padding: 0px;
}
.root {
border: solid 1px red;
width: 420px;
padding: 10px;
background-color: #f2f2f2;
}
</style>