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
×
195019601970198019902000201068707274767880
lifeExp over timecountryCanadaUnited StatesyearlifeExp
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.