Menu

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:
- ID of the current user
- Channel SID
-Whether chat window expanded or not
- Current state of chat engagement
- Whether to ignore previous chat sessions on page refresh
- Map of user avatars
- JSON Web Token (JWT) for making API calls

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

Rate this page:

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.

Thank you for your feedback!

Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

Sending your feedback...
🎉 Thank you for your feedback!
Something went wrong. Please try again.

Thanks for your feedback!

thanks-feedback-gif