# Storing Data
Learn how to persist data in your Lottie Creator Plugin.

Plugins have two ways to store data, each suited for different use cases:

| Storage                 | Persisted Where | Saved with File    | Limit         | Value Types                            |
| ----------------------- | --------------- | ------------------ | ------------- | -------------------------------------- |
| `creator.clientStorage` | User's browser  | No                 | 5 MB          | Boolean, number, string, object, array |
| `node.data`             | Animation file  | Yes (not exported) | 5 kB per node | Strings only                           |

## Client storage

- Use `creator.clientStorage` for data that should persist across sessions but doesn't need to be saved with the animation file.
- This is ideal for user preferences, plugin settings, and cached data.

```typescript
// In plugin sandbox (plugin.ts)

// Save data
await creator.clientStorage.set("lastUsedColor", "#FF5733");

// Retrieve data
const color = await creator.clientStorage.get("lastUsedColor");
console.log("Last used color:", color);

// List all keys
const keys = await creator.clientStorage.keys();
console.log("Stored keys:", keys);

// Check storage usage
const usedBytes = await creator.clientStorage.usedQuota();
console.log("Used storage:", usedBytes, "bytes");

// Delete a specific key
await creator.clientStorage.delete("lastUsedColor");

// Clear all plugin data
await creator.clientStorage.clear();
```

## Node storage

- Use `node.data` for data that should be saved with the animation file or be associated with specific nodes in the scene.
- This is ideal for layer metadata, custom properties, and plugin state that's specific to the current project.
- Note: node storage data is saved with the Lottie Creator file but is **not retained when exported** to a Lottie animation.

```typescript
// In plugin sandbox (plugin.ts)

// Get a layer to store data on
const layers = creator.activeScene.layers;

if (layers.length > 0) {
  const layer = layers[0];

  // Store string values
  layer.data.set("customId", "my-special-layer");

  // For complex data, stringify it first (values must be strings)
  layer.data.set(
    "metadata",
    JSON.stringify({
      created: Date.now(),
      author: "Plugin User",
    })
  );

  // Retrieve data
  const customId = layer.data.get("customId");
  console.log("Custom ID:", customId);

  // Parse complex data
  const metadata = JSON.parse(layer.data.get("metadata") ?? "{}");
  console.log("Created at:", metadata.created);

  // List all keys on this node
  console.log("Node data keys:", layer.data.keys);

  // Check storage usage on this node
  console.log("Used quota:", layer.data.usedQuota, "bytes");

  // Delete a specific key
  layer.data.delete("customId");

  // Clear all plugin data from this node
  layer.data.clear();
}
```

## Important

- **Client storage** is stored in the browser and can be inspected via developer tools. Avoid storing sensitive data.
- **Node storage** is saved in the animation file. Users can potentially access it if they inspect the file. Avoid storing sensitive data.
- Both storage types are specific to your plugin ID. If your plugin ID changes, you won't be able to access or update the data.

## Example

[Storing data example →](https://github.com/LottieFiles/creator-plugin-examples/tree/main/storing-data)