---
title: Local/Session Storage Plugins
desc: >-
  A Quasar plugin that wraps the Local/Session Storage, retrieving data with its
  original JS type.
---
Quasar provides a wrapper over [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API).

> [!TIP]
> Web Storage API only retrieves strings. **Quasar retrieves data with its original data type.** You tell it to store a Number then to retrieve it and it will still be a Number, not a string representation of the number as with Web Storage API. Same for JSON, Regular Expressions, Dates, Booleans and so on.

> [!CAUTION]
> **Note about SSR/SSG**
> When running the code server-side on SSR/SSG builds, this feature can't work. Web Storage is a browser API only. You can however make use of it on the client-side with SSR/SSG.

## LocalStorage API

### Methods

- `hasItem(key: string): boolean`
  Check if storage item exists
  Params:
    - `key` (string, required)
      Entry key
      Examples: `'userId'`
  Returns: `boolean` — Does the item exists or not?
- `getLength(): number`
  Get storage number of entries
  Returns: `number` — Number of entries
- `getItem(key: string): number | boolean | Date | RegExp | Function | object | any[] | string`
  Get a storage item value
  Params:
    - `key` (string, required)
      Entry key
      Examples: `'userId'`
  Returns: `number | boolean | Date | RegExp | Function | object | any[] | string` — Storage item value
- `getIndex(index: number): number | boolean | Date | RegExp | Function | object | any[] | string`
  Get the storage item value at specific index
  Params:
    - `index` (number, required)
      Entry index
  Returns: `number | boolean | Date | RegExp | Function | object | any[] | string` — Storage item index
- `getKey(index: number): string`
  Get the storage key at specific index
  Params:
    - `index` (number, required)
      Entry index
  Returns: `string` — Storage key
- `getAll(): object`
  Retrieve all items in storage
  Returns: `object` — Object syntax: item name as Object key and its value
- `getAllKeys(): any[]`
  Retrieve all keys in storage
  Returns: `any[]` — Storage keys (Array of Strings)
- `setItem(key: string, value: number | boolean | Date | RegExp | Function | object | any[] | string): void`
  Set item in storage
  Params:
    - `key` (string, required)
      Entry key
      Examples: `'userId'`
    - `value` (number | boolean | Date | RegExp | Function | object | any[] | string, required)
      Entry value
      Function signature: `(...params?: any) => any`
      Examples: `'john12'`
- `removeItem(key: string): void`
  Remove a storage item
  Params:
    - `key` (string, required)
      Storage key
      Examples: `'userId'`
- `clear(): void`
  Remove everything from the storage
- `isEmpty(): boolean`
  Determine if storage has any items
  Returns: `boolean` — Tells if storage is empty or not

### Vue Injection

Accessible via `$q.localStorage` (e.g., `this.$q.localStorage` in Options API or `useQuasar().localStorage` in Composition API).

## SessionStorage API

### Methods

- `hasItem(key: string): boolean`
  Check if storage item exists
  Params:
    - `key` (string, required)
      Entry key
      Examples: `'userId'`
  Returns: `boolean` — Does the item exists or not?
- `getLength(): number`
  Get storage number of entries
  Returns: `number` — Number of entries
- `getItem(key: string): number | boolean | Date | RegExp | Function | object | any[] | string`
  Get a storage item value
  Params:
    - `key` (string, required)
      Entry key
      Examples: `'userId'`
  Returns: `number | boolean | Date | RegExp | Function | object | any[] | string` — Storage item value
- `getIndex(index: number): number | boolean | Date | RegExp | Function | object | any[] | string`
  Get the storage item value at specific index
  Params:
    - `index` (number, required)
      Entry index
  Returns: `number | boolean | Date | RegExp | Function | object | any[] | string` — Storage item index
- `getKey(index: number): string`
  Get the storage key at specific index
  Params:
    - `index` (number, required)
      Entry index
  Returns: `string` — Storage key
- `getAll(): object`
  Retrieve all items in storage
  Returns: `object` — Object syntax: item name as Object key and its value
- `getAllKeys(): any[]`
  Retrieve all keys in storage
  Returns: `any[]` — Storage keys (Array of Strings)
- `setItem(key: string, value: number | boolean | Date | RegExp | Function | object | any[] | string): void`
  Set item in storage
  Params:
    - `key` (string, required)
      Entry key
      Examples: `'userId'`
    - `value` (number | boolean | Date | RegExp | Function | object | any[] | string, required)
      Entry value
      Function signature: `(...params?: any) => any`
      Examples: `'john12'`
- `removeItem(key: string): void`
  Remove a storage item
  Params:
    - `key` (string, required)
      Storage key
      Examples: `'userId'`
- `clear(): void`
  Remove everything from the storage
- `isEmpty(): boolean`
  Determine if storage has any items
  Returns: `boolean` — Tells if storage is empty or not

### Vue Injection

Accessible via `$q.sessionStorage` (e.g., `this.$q.sessionStorage` in Options API or `useQuasar().sessionStorage` in Composition API).

## Installation

Add to `quasar.config.js`:

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

## Usage

```js
import { LocalStorage, SessionStorage } from 'quasar'

LocalStorage.set(key, value)
let value = LocalStorage.getItem(key)

SessionStorage.set(key, value)
let value = SessionStorage.getItem(key)
```

```js
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.localStorage.set(key, value)
  const value = $q.localStorage.getItem(key)

  $q.sessionStorage.set(key, value)
  const otherValue = $q.sessionStorage.getItem(key)
}
```

For a bulletproof approach when setting a value, it's best to also catch any potential errors raised by the underlying Local/Session Storage Web API, like when exceeding quota:

```js
try {
  $q.localStorage.set(key, value)
} catch (e) {
  // data wasn't successfully saved due to
  // a Web Storage API error
}
```

> [!TIP]
> For an exhaustive list of methods, please check the API section.

## Data Types

Quasar Storage supports (but not limited to) the following data types out of the box. If you store one of these types, the retrieved data will have the same data type.

- Dates
- Regular Expressions
- Numbers
- Booleans
- Strings
- Plain Javascript Objects

If you store any *other* data type, the returned value will be a String.

So you can even store functions, but be careful that you need to eval() the returned value (which is a String representation of the function).