Quasar网络存储(Quasar Web Storage)

Quasar提供了Web Storage API的封装。

注意
Web Storage API仅检索字符串。 Quasar以原始数据类型检索数据。您告诉它存储一个数字然后检索它，它仍然是一个数字，而不是数字的字符串表示形式，就像Web Storage API一样。 JSON、正则表达式、日期、布尔值等也是如此。 参见下文。

安装

编辑 /quasar.conf.js:

framework: {
  plugins: [
    'LocalStorage',
    'SessionStorage'
  ]
}

入门

Quasar支持本地和会话存储。

// 在Vue文件之外
import { LocalStorage, SessionStorage } from 'quasar'

LocalStorage.set(key, value)
let value = LocalStorage.get.item(key)

SessionStorage.set(key, value)
let value = SessionStorage.get.item(key)
// 在Vue文件之中

this.$q.localStorage.set(key, value)
let value = this.$q.localStorage.get.item(key)

this.$q.sessionStorage.set(key, value)
let value = this.$q.sessionStorage.get.item(key)

在我们开始讨论API之前，让我们先看看哪些数据类型是开箱即用的。

数据类型

Quasar Storage支持（但不限于）以下数据类型。 如果您存储这些类型之一，则检索到的数据将具有相同的数据类型。

如果您存储任何其它数据类型，则返回的值将是一个字符串。

所以你甚至可以存储函数，但要小心你需要使用eval()来处理返回的值（这是函数的字符串表示形式）。

方法

存储数据

// 在Vue文件之外
import { LocalStorage, SessionStorage } from 'quasar'

LocalStorage.set(key, value)
SessionStorage.set(key, value)
// 在Vue文件之中
this.$q.localStorage.set(key, value)
this.$q.sessionStorage.set(key, value)

检索数据

一项：

// 在Vue文件之外
import { LocalStorage, SessionStorage } from 'quasar'

let item = LocalStorage.get.item(key)
let item = SessionStorage.get.item(key)

// 在Vue文件之中
let item = this.$q.localStorage.get.item(key)
let item = this.$q.sessionStorage.get.item(key)

所有项:

// 在Vue文件之外
import { LocalStorage, SessionStorage } from 'quasar'

let item = LocalStorage.get.all()
let item = SessionStorage.get.all()

// 在Vue文件之中
let item = this.$q.localStorage.get.all()
let item = this.$q.sessionStorage.get.all()

通过存储库进行迭代

获得存储库的长度：

// 在Vue文件之外
import { LocalStorage, SessionStorage } from 'quasar'

let length = LocalStorage.get.length()
let length = SessionStorage.get.length()

// 在Vue文件之中
let length = this.$q.localStorage.get.length()
let length = this.$q.sessionStorage.get.length()

通过索引获取项：

// 在Vue文件之外
import { LocalStorage, SessionStorage } from 'quasar'

let item = LocalStorage.get.index(index)
let item = SessionStorage.get.index(index)

// 在Vue文件之中
let item = this.$q.localStorage.get.index(index)
let item = this.$q.sessionStorage.get.index(index)

现在你知道如何在存储库中循环。

删除数据

一项：

// 在Vue文件之外
import { LocalStorage, SessionStorage } from 'quasar'

LocalStorage.remove(key)
SessionStorage.remove(key)

// 在Vue文件之中
this.$q.localStorage.remove(key)
this.$q.sessionStorage.remove(key)

所有项(清除存储库):

// 在Vue文件之外
import { LocalStorage, SessionStorage } from 'quasar'

LocalStorage.clear()
SessionStorage.clear()

// 在Vue文件之中
this.$q.localStorage.clear()
this.$q.sessionStorage.clear()

存储库空了吗?

// 在Vue文件之外
import { LocalStorage, SessionStorage } from 'quasar'

(boolean) LocalStorage.isEmpty()
(boolean) SessionStorage.isEmpty()

// 在Vue文件之中
(boolean) this.$q.localStorage.isEmpty()
(boolean) this.$q.sessionStorage.isEmpty()

键值在存储库里吗?

// 在Vue文件之外
import { LocalStorage, SessionStorage } from 'quasar'

(boolean) LocalStorage.has(key)
(boolean) SessionStorage.has(key)

// 在Vue文件之中
(boolean) this.$q.localStorage.has(key)
(boolean) this.$q.sessionStorage.has(key)
Cookies 应用可见性