本地/会话存储插件
Quasar提供了Web Storage API的封装。
TIP
Web Storage API仅检索字符串。 Quasar以原始数据类型检索数据。 您告诉它存储一个数字然后检索它,它仍然是一个数字,而不是数字的字符串表示形式,就像Web Storage API一样。 JSON、正则表达式、日期、布尔值等也是如此。
安装
// quasar.config.js
return {
framework: {
plugins: [
'LocalStorage',
'SessionStorage'
]
}
}
Note about SSR
在SSR构建上运行代码服务器端时,此功能不起作用。 Web存储仅是浏览器API。 但是,您可以在带有SSR的客户端上使用它。
用法
// 在Vue文件之外
import { LocalStorage, SessionStorage } from 'quasar'
LocalStorage.set(key, value)
let value = LocalStorage.getItem(key)
SessionStorage.set(key, value)
let value = SessionStorage.getItem(key)
// 在Vue文件之中
this.$q.localStorage.set(key, value)
let value = this.$q.localStorage.getItem(key)
this.$q.sessionStorage.set(key, value)
let value = this.$q.sessionStorage.getItem(key)
设置值的保险方法是最好也捕获底层的Local/Session Storage Web API引发的任何潜在错误,例如超出配额时:
try {
this.$q.localStorage.set(key, value)
} catch (e) {
// 由于Web Storage API错误,
// 数据未成功保存
}
TIP
有关方法的详尽列表,请检查API部分。
数据类型
Quasar Storage支持(但不限于)以下数据类型。 如果您存储这些类型之一,则检索到的数据将具有相同的数据类型。
- 日期
- 常用表达式
- 数字
- 布尔值
- 字符串
- 纯Javascript对象
如果您存储任何其它数据类型,则返回的值将是一个字符串。
所以你甚至可以存储函数,但要小心你需要使用eval()来处理返回的值(这是函数的字符串表示形式)。