本地/会话存储插件

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()来处理返回的值(这是函数的字符串表示形式)。

LocalStorage API

SessionStorage API