Cookies and the Web Storage API
This guide is for Flex UI 1.x and channels that use Programmable Chat and Proxy. If you are using Flex UI 2.x or you are starting out, we recommend that you build with Flex Conversations.
Flex Webchat persists some client-side data to create a better user experience. This can cause some issues when your customers have the Web Storage API disabled. This page discusses cookies, local storage, and session storage, and how Flex Webchat utilizes each one.
Overview
Flex Webchat utilizes each storage strategy in the following ways:
Cookies
Flex Webchat does not use cookies. If your users block the browser from using Cookies, this should not cause any issues.
Local Storage
Used to persist chat after page reload and for error logging. Disabling local storage will cause degraded experience, especially on page reloads, but Webchat should still function.
Session Storage
Required for the proper functioning of Webchat (e.g., opening and maintaining the WebSocket.) Disabling session storage prevents Webchat from functioning.
Definitions
| Storage Type | Definition | Max Size | Expiration |
| Cookies | Stores data that has to be sent back to the server with subsequent XHR requests | 4KB | Expires at a chosen expiration date, or when the session ends in the case of a session cookie |
| Local Storage | Stores data in the browser across sessions. Opening two tabs with the same URL will share local storage. Data is never sent to the backend |
Up to 5 MB of data in the browser in key/value pairs |
Data never expires but can be cleared by the user |
| Session Storage | Temporarily stores data in the browser. Data does not persist across sessions (i.e., two tabs with the same URL will have different session storage.) Data is never sent to the backend. |
Stores up to 10 MB of data in the browser in key/value pairs |
Data expires when the session ends, e.g., if the browser tab is closed |
Information stored in local storage
|
Key/name |
Value |
Function |
Required for functionality of Webchat |
|
twilio-flex-cf |
Object |
Key to the behavior of the UI in persisting state across page reloads. Contains: |
For a better UX experience like persisting chat after reloading, yes. Otherwise, no. |
|
loglevel:twilio-flex-webchat-ui |
Enum |
For debugging flex-webchat-ui; determines the level of logs that will be printed to the console |
No |
|
loglevel |
Enum |
For debugging; determines the level of logs that will be printed to the console |
No |
Information stored in session storage in Webchat
|
Key/name |
Value |
Function |
Required for functionality of Webchat |
|
twilio_twilsock_token_storage |
Boolean |
Indicates initialization state of twilsock token storage. |
Yes |
|
twilio_continuation_token_ip_messaging |
JWT |
A Continuation Token from previous connection in JSON Web Token format, allows client to reuse same endpoint-id for messaging |
Yes |
|
<id>::map::<id>.channels |
Object |
Contains uri and id data for sending/fetching channel information |
Yes |
|
<id>::map::<id>.info |
Object |
Contains uri and id data for sending/fetching channel information |
Yes |
|
<id>::document::<id>.channel |
Object |
Contains uri and id data for sending/fetching channel information |
Yes |
|
<id>::map::<id>.roster |
Object |
Contains uri and id data for sending/fetching channel information |
Yes |
|
<id>::list::<id>.messages |
Object |
Contains uri and id data for sending/fetching message information |
Yes |
Need some help?
We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.
