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>