使用面向对象以及设计模式的思维敲了一个Vue插件-VueStorage数据存储

2024-01-03 09:21:46

在开发Vue的项目过程中，我们难免会经常会把一些数据储存到我们的浏览器中，可能localStorage或SessionStorage一下，亦或存储到内存cache当中。但在存或取数据的过程中，还得每次去分别写上一堆代码，不免也觉得有些繁琐，所以想着是否可以封装一个库，来实现对各种类型数据存储的通用支持。

鉴于Vue.js内部在很多业务场景也有把数据存储到内存或是浏览器当中去，官方社区就有人建议可以直接利用内部提供的函数来实现这个需求，让我们更好的封装出VueStorage这个库。

1. 安装

npm install vuestore

2. 使用

import { VueStorage } from 'vuestores'

const storage = new VueStorage()

// 设置一个字符串类型的值
storage.set('name', 'John Doe')

// 获取一个字符串类型的值
storage.get('name') // 'John Doe'

// 删除一个值
storage.remove('name')

// 检查一个值是否存在
storage.has('name') // false

// 设置一个对象类型的值
storage.set('user', { name: 'John Doe', age: 30 })

// 获取一个对象类型的值
storage.get('user') // { name: 'John Doe', age: 30 }

// 删除一个对象类型的值
storage.remove('user')

// 检查一个对象类型的值是否存在
storage.has('user') // false

// 设置一个数组类型的值
storage.set('hobbies', ['reading', 'writing', 'coding'])

// 获取一个数组类型的值
storage.get('hobbies') // ['reading', 'writing', 'coding']

// 删除一个数组类型的值
storage.remove('hobbies')

// 检查一个数组类型的值是否存在
storage.has('hobbies') // false