# dcc_store

The `dcc_store` component is used to store JSON data in the browser.

For more information and examples, refer to Part 4 of the Dash tutorial on Sharing Data Between Callbacks.

## Examples

### Share Data Between Callbacks

App
Code
×Canada
×United States
×
Life expectancy
×

country | year | pop | continent | lifeExp | gdpPercap
--- | --- | --- | --- | --- | ---
Canada | 1952 | 14785584 | Americas | 68.75 | 11367.16112
Canada | 1957 | 17010154 | Americas | 69.96 | 12489.95006
Canada | 1962 | 18985849 | Americas | 71.3 | 13462.48555
Canada | 1967 | 20819767 | Americas | 72.13 | 16076.58803
Canada | 1972 | 22284500 | Americas | 72.88 | 18970.57086
Canada | 1977 | 23796400 | Americas | 74.21 | 22090.88306
Canada | 1982 | 25201900 | Americas | 75.76 | 22898.79214
Canada | 1987 | 26549700 | Americas | 76.86 | 26626.51503
Canada | 1992 | 28523502 | Americas | 77.95 | 26342.88426
Canada | 1997 | 30305843 | Americas | 78.61 | 28954.92589
Canada | 2002 | 31902268 | Americas | 79.77 | 33328.96507
Canada | 2007 | 33390141 | Americas | 80.653 | 36319.23501
United States | 1952 | 157553000 | Americas | 68.44 | 13990.48208
United States | 1957 | 171984000 | Americas | 69.49 | 14847.12712
United States | 1962 | 186538000 | Americas | 70.21 | 16173.14586
United States | 1967 | 198712000 | Americas | 70.76 | 19530.36557
United States | 1972 | 209896000 | Americas | 71.34 | 21806.03594
United States | 1977 | 220239000 | Americas | 73.38 | 24072.63213
United States | 1982 | 232187835 | Americas | 74.65 | 25009.55914
United States | 1987 | 242803533 | Americas | 75.02 | 29884.35041
United States | 1992 | 256894189 | Americas | 76.09 | 32003.93224
United States | 1997 | 272911760 | Americas | 76.81 | 35767.43303
United States | 2002 | 287675526 | Americas | 77.31 | 39097.09955
United States | 2007 | 301139947 | Americas | 78.242 | 42951.65309

### Store Clicks

App
Code
Click to store in:

0 Memory Clicks
0 Local Clicks
0 Session Clicks

## Retrieving the Initial Store Data

If you use the `data` prop as an output, you cannot get the initial data on load with the `data` prop. To counter this, you can use the `modified_timestamp` as `Input` and the `data` as `State`.

Sign up for Dash Club → Two free cheat sheets plus updates from Chris Parmer and Adam Schroeder delivered to your inbox every two months. Includes tips and tricks, community apps, and deep dives into the Dash architecture. Join now.

## Storage Limitations

- The maximum browser storage space is determined by the following factors:
  - Mobile or laptop
  - The browser, under which a sophisticated algorithm is implemented within Quota Management
  - Storage encoding where UTF-16 can end up saving only half of the size of UTF-8
  - It's generally safe to store up to 2MB in most environments, and 5~10MB in most desktop-only applications.
- `modified_timestamp` is read only.

## Store Properties

> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.

`id` (String; required): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.

`storage_type` (a value equal to: 'local', 'session' or 'memory'; default `'memory'`): The type of the web storage. memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

`data` (Dict | Array | Real | String | Bool; optional): The stored data for the id.

`clear_data` (Bool; default `false`): Set to true to remove the data contained in `data_key`.

`modified_timestamp` (Real; default `-1`): The last time the storage was modified.