Vueuse useLocalStorage 响应式的本地存储

Vueuse useLocalStorage  是对js的localStorage进行的封装，实现了响应式的本地存储，使用更佳简单。

代码示例

import { useLocalStorage } from '@vueuse/core'

// 绑定对象
const state = useLocalStorage('key-store', { id: 100, url: 'https://www.itxst.com' })

// 绑定 boolean
const flag = useLocalStorage('key-flag', true) // returns Ref<boolean>

// 绑定数字
const count = useLocalStorage('key-count', 0) // returns Ref<number>
// 修改对象
state.value.id=200;
flag.value=false;
// 删除本地存储
state.value = null;
flag.value=null;

在线例子

例子

合并默认值

默认情况如果你写入的key已经存在本地存储中，useLocalStorage是不会合并你新对到本地存储里面，而是以绑定存储对基准数据

import { useLocalStorage} from '@vueuse/core';
//用原生方法写入数据
localStorage.setItem('key_user', '{"id":222}')
//用useStorage绑定对象
const userInfo = useLocalStorage('key_user', { id: 1, url: 'https://www.itxst.com' });

//输出结果为undefined,因为默认不会合并已存在的数据
console.log(userInfo.value.url);

设置mergeDefaults:true可以对已经存在数据进行浅合并

import { useLocalStorage} from '@vueuse/core';
//用原生方法写入数据
localStorage.setItem('key_user', '{"id":222}')
//用useStorage绑定对象
const userInfo = useLocalStorage('key_user', { id: 1, url: 'https://www.itxst.com' },{ mergeDefaults: true });

//输出结果为 https://www.itxst.com,合并了已存在的数据
console.log(userInfo.value.url);

设置mergeDefaults:true是浅合并，你可以自定义函数进行深合并

import { useLocalStorage} from '@vueuse/core';
//用原生方法写入数据
localStorage.setItem('key_user', '{"id":222}')
//用useStorage绑定对象
const userInfo = useLocalStorage('key_user', 
{ id: 1, url: 'https://www.itxst.com' },
{ mergeDefaults: (storageValue, defaults) => deepMerge(defaults, storageValue) });
 //deepMerge为你自定义的深度合并函数

自定义序列化

useLocalStorage将根据提供的序列化方法。比如JSON.stringify/JSON.parse将用于对象，Number.toString/parseFloat将用于数字等。

import { useLocalStorage} from '@vueuse/core'
const item=useLocalStorage(
  'key',
  {}, 
  {
    serializer: {
      read: (v: any) => v ? JSON.parse(v) : null,
      write: (v: any) => JSON.stringify(v),
    },
  }
)

当您提供null作为默认值时，useLocalStorage无法推导数据类型，在这种情况下，您可以提供StorageSerializers对象类型告诉我们如何初始化。

import { useLocalStorage,StorageSerializers } from '@vueuse/core';

const userInfo = useLocalStorage('key_user', null, { serializer: StorageSerializers.object })
userInfo.value = { foo: 'bar' }

const num = useLocalStorage('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 { ref ,reactive} from 'vue'
import { useLocalStorage } from '@vueuse/core'
 
const userInfo = useLocalStorage('key_user', { id: 1, url: 'https://www.itxst.com' })

const edit=()=>{
  userInfo.value.id++;
}
const del=()=>{
  userInfo.value=null;
}
</script>
<style scoped>
 .pagex{
  padding: 0px;
 }
 .root{
  border: solid 1px red;
  width: 420px;
  padding: 10px;
  background-color: #f2f2f2;
 }
</style>