> Markdown version of [Web Storage](https://vaadin.com/docs/next/flow/browser-apis/web-storage-api). Section index: [llms.txt](https://vaadin.com/docs/next/flow/llms.txt)

# Web Storage

The `WebStorage` API allows you to access the [browser Web Storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) from the server. Web Storage is a standard JavaScript API to store string-only key-value pairs in the device running the browser. Data is persisted only in that device.

`WebStorage.Storage` defines two types of storage: local storage and session storage.

> **Note: Default Value**
>
> `WebStorage` uses `UI.getCurrent()` by default to get a target UI instance. All methods also have variants with a parameter for UI instance. The UI instance argument shouldn’t be null — especially when calling a method outside of the main thread.

## <a id="local-storage"></a>Local Storage

Local storage data is stored per origin — a combination of protocol, host, and port — with no expiration date.

Shortcuts: `setItem(String, String)`, `removeItem(String)`, and `clear()`.

The following code sets a key-value pair to local storage:

```java
WebStorage.setItem("key", "value");
```

## <a id="session-storage"></a>Session Storage

Session storage data is stored per origin and browser page session, i.e., the browser window or tab. Storage is cleared when the window or tab is closed.

> **Note: Storage Term**
>
> Session storage term comes from the `Window.sessionStorage` Web Storage JavaScript API. It’s not directly affected by the lifecycle of Vaadin sessions or HTTP sessions in general.

## <a id="setting-key-value-pairs"></a>Setting Key-Value Pairs

Key-value pairs are set in the storage with `setItem(Storage, String, String)`. You’d do that like this:

```java
WebStorage.setItem(Storage.LOCAL_STORAGE, "key", "value");
```

## <a id="removing-key-value-pairs"></a>Removing Key-Value Pairs

You can remove key-value pairs from storage with `removeItem(Storage, String)`. Below is an example of this:

```java
WebStorage.removeItem(Storage.SESSION_STORAGE, "key");
```

## <a id="clearing-storage"></a>Clearing Storage

Clear storage with `clear(Storage)`. Below is an example:

```java
WebStorage.clear(Storage.SESSION_STORAGE);
```

## <a id="getting-values-from-storage"></a>Getting Values from Storage

You can request a value from storage by using a key. You can process the returned value using a callback with `getItem(Storage, String, Callback)`. Below is example of how to get a value from the session storage with a key:

```java
WebStorage.getItem(Storage.SESSION_STORAGE, "key", value -> {
    System.out.println(value);
});
```

Callback gives a null value in case of an unexpected error.

`08b13e40-3845-11ee-be56-0242ac120002`