Web Platform Storage

A browser storage solution for Procore front-end applications, providing a standardized interface for interacting with localStorage and sessionStorage.

Installation

Install via yarn:

``bash
yarn add @procore/web-sdk-storage
`

Features

- Type-safe access to localStorage and sessionStorage.
- Accepts react-query-style keys for cleaner storage keys.

Usage

`ts
import { storage } from '@procore/web-sdk-storage';

const itemToSave: Item = {
some: 'data',
};
const itemKey = ['items', { companyId: 1, projectId: 2, itemId: 3 }];

// set item in local storage
storage.local.setItem(itemKey, itemToSave);

// set item on session
storage.session.setItem(itemKey, itemToSave);

const defaultValue = {
some: 'default',
};

// get item from local storage
const savedItem = storage.local.getItem(itemKey, defaultValue);

// get item from session storage
const savedItem = storage.session.getItem(itemKey, defaultValue);
`

API Reference

Both storage.local and storage.session share the same set of methods for interacting with localStorage and sessionStorage, respectively.

$3

- setItem(key, value)

Stores a value under the specified key.

`ts
storage.local.setItem(key, value);
storage.session.setItem(key, value);
`

- getItem(key, defaultValue = null)

Retrieves the value associated with the specified key.

`ts
const value = storage.local.getItem(key, defaultValue);
const value = storage.session.getItem(key, defaultValue);
`

- deleteItem(key)

Removes the item associated with the specified key.

`ts
storage.local.deleteItem(key);
storage.session.deleteItem(key);
`

- clear()

Clears all items from the storage.

`ts
storage.local.clear();
storage.session.clear();
`

$3

- key: Can be a string or an array (e.g., React Query-style key) that uniquely identifies the storage item.
- value: The data you want to store, which can be any serializable JavaScript object.
- defaultValue: The fallback object to return if the key is not found or has an error. Will default to null`.

Support

#team-ui-foundations