composer-storage-analysis.mdā¢3.72 kB
# EuConquisto Composer Storage Analysis
## Summary
The EuConquisto Composer uses a **hybrid storage approach**:
1. **localStorage** - For the current working composition
2. **URL encoding** - For persistence and sharing
## Storage Mechanism Details
### 1. localStorage Keys
#### `rdp-composer-data`
Contains the current composition in JSON format:
```json
{
"version": "1.1",
"metadata": {
"title": "Test Composition Storage",
"description": "",
"thumb": null,
"tags": []
},
"interface": {
"content_language": "pt_br",
"index_option": "buttons",
"font_family": "Lato",
"show_summary": "disabled",
"finish_btn": "disabled"
},
"structure": [
{
"id": "530dc300-5490-11f0-b755-a5e4577b92eb",
"type": "head-1",
"content_title": null,
"primary_color": "#FFFFFF",
"secondary_color": "#aa2c23",
"category": "<p>HEADER TEST</p>",
"background_image": "https://pocs.digitalpages.com.br/rdpcomposer/media/head-1/background.png",
"avatar": "https://pocs.digitalpages.com.br/rdpcomposer/media/head-1/avatar.png",
"avatar_border_color": "#00643e",
"author_name": "<p>H. Rackham</p>",
"author_office": "<p>At vero eos</p>",
"show_category": true,
"show_author_name": true,
"show_divider": true
}
],
"assets": []
}
```
#### Other localStorage Keys
- `custom_colors` - User's custom color palette
- `rdp-composer-active-project` - Project configuration
- `rdp-composer-projects` - List of available projects
- `rdp-composer-user-info` - User information
- `rdp-composer-user-data` - Authentication data
### 2. URL Encoding for Persistence
When saving, the composition is encoded in the URL:
```
https://composer.euconquisto.com/#/embed/composer/{ENCODED_DATA}
```
The encoding process:
1. Take the composition JSON
2. Compress with gzip
3. Encode as base64
4. Append to URL
Example URL after save:
```
https://composer.euconquisto.com/#/embed/composer/H4sIAAAAAAAAAwBiAZ3-AwAAAUEOAAAAADE0MGUwYzE1...
```
### 3. Storage Flow
1. **Creating/Editing**: Data stored in `localStorage['rdp-composer-data']`
2. **Saving**: Data compressed and encoded into URL
3. **Loading**: URL decoded and loaded into localStorage
4. **Sharing**: URL contains complete composition data
## Implementation Implications
### For Browser Automation (Playwright)
```javascript
// Read current composition
const compositionData = await page.evaluate(() => {
return JSON.parse(localStorage.getItem('rdp-composer-data'));
});
// Update composition
await page.evaluate((newData) => {
localStorage.setItem('rdp-composer-data', JSON.stringify(newData));
}, compositionData);
// Get saved composition URL
const url = await page.url();
// Extract encoded data from URL after /composer/
```
### For Direct API Approach
Since storage is client-side only:
- Cannot bypass browser for composition CRUD
- Must use browser automation for all operations
- API endpoints (500 errors) were likely for server-side storage (not used)
## Key Findings
1. **No Server Storage**: Compositions are stored entirely client-side
2. **URL as Database**: The URL acts as the persistence mechanism
3. **localStorage as Working Copy**: Current edits in localStorage
4. **Self-Contained**: Complete composition data travels in URL
5. **No API Required**: All storage operations happen in browser
## Recommendations
1. **Use Browser Automation**: Required for composition management
2. **Manipulate localStorage**: For creating/editing compositions
3. **Extract URLs**: For saving/sharing compositions
4. **Decode URLs**: For loading existing compositions
5. **Abandon API Approach**: Server API not used for composition storage