vueuse 中文文档

VueUse useSessionStorage 响应式Session存储

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> &nbsp;
    <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>
Catalog
vueuse 入门 State 状态 createGlobalState 全局状态 createInjectionState 组件传值 createSharedComposable useAsyncState 异步响应式 useDebouncedRefHistory useLastChanged 最后修改时间 useLocalStorage 响应式存储 useManualRefHistory useRefHistory 历史快照 useStorageAsync useSessionStorage 响应式存储 useStorage 响应式存储 useThrottledRefHistory Elements 元素 Browser 浏览器 Sensors 感应监测