To store data in the a browser like chrome, there are plenty of options. These are the inbuild ones:
- Cookies
- Local storage
- Session storage
- IndexedDB
- Web Storage API
Feature | Cookies | Local Storage | Session Storage | IndexedDB | Web Storage API (Overall) |
---|---|---|---|---|---|
Type | Key-value store | Key-value store | Key-value store | Object store (structured) | Combination of above |
Persistence | Session or persistent | Persistent | Session only | Persistent | Depends on type |
Storage Location | Server-side (sent with requests) | Client-side (browser) | Client-side (browser) | Client-side (browser) | Client-side (browser) |
Data Capacity | Up to 4KB per cookie | Up to 5-10MB (varies) | Up to 5-10MB (varies) | Up to 250MB (varies) | Up to 5-10MB (varies) |
Data Type | Strings only | Strings only | Strings only | Objects and strings | Strings and potentially objects |
API | Document.cookie | localStorage | sessionStorage | IndexedDB API | LocalStorage and SessionStorage APIs |
Data Sharing with Server | Yes, sent with requests | No | No | No | No (indirectly through app logic) |
Security | More vulnerable (exposed in requests) | More secure (not sent to server) | More secure (not sent to server) | More secure (not sent to server) | More secure (not sent to server) |
Use Cases | Session management, user preferences (limited data) | User preferences, app state, large amounts of data (complex objects) | Temporary data specific to a session | Large datasets, complex data structures | Provides access to LocalStorage and SessionStorage |