window.dash_clientside = Object.assign({}, window.dash_clientside, {
clientside: {
viewCallback: function(value) {
if (typeof value === "undefined") {
return []
}
else {
let formattedString = value.join(', ')
return formattedString;
}
},
selectAllValue: function (n_clicks, options, activeValue, id) {
let key = id
let active_value_length
if (typeof activeValue === 'undefined') {
active_value_length = 0
}
else {
const avtive_valueArray = activeValue.map(item => item.value)
active_value_length = avtive_valueArray.length
}
const optionsArray = options.map(item => item.value)
const max_length = optionsArray.length
if (active_value_length < max_length) {
localStorage.setItem(key, JSON.stringify([optionsArray]))
return optionsArray
}
else if (active_value_length === max_length) {
localStorage.setItem(key, JSON.stringify([]))
return []
}
},
setStorageValueReload: function (pathname, id) {
let key = id
let valueArray = JSON.parse(localStorage.getItem(key))
return valueArray[0]
},
setStorageValue: function (value, id) {
let key = id
localStorage.setItem(key, JSON.stringify([value]))
return []
}
}
})
app.clientside_callback(
ClientsideFunction(
namespace='clientside',
function_name='selectAllValue'
),
Output('checklist', 'value', allow_duplicate=True),
Input('select_all', 'n_clicks'),
State('checklist', 'options'),
State('checklist', 'value'),
State('checklist', 'id'),
prevent_initial_call=True
)
app.clientside_callback(
f'''
function printValue(search_value) {{
let lowerCaseSearchValue = search_value.toLowerCase();
let lpu_list = {lpu_list};
let found = lpu_list.filter(element => element.value.toLowerCase().includes(lowerCaseSearchValue));
if (found.length > 0) {{
return found;
}} else {{
return {lpu_allert};
}}
}}
''',
Output("checklist", "options"),
Input("search-input", "value"),
prevent_initial_call=True)
app.clientside_callback(
ClientsideFunction(
namespace='clientside',
function_name='viewCallback'
),
Output('view', 'children'),
Input('checklist', 'value')
)
app.clientside_callback(
ClientsideFunction(
namespace='clientside',
function_name='setStorageValueReload'
),
Output('checklist', 'value'),
Input('url', 'pathname'),
State('checklist', 'id')
)
app.clientside_callback(
ClientsideFunction(
namespace='clientside',
function_name='setStorageValue'
),
Output('return', 'children'),
Input('checklist', 'value'),
State('checklist', 'id')
)
This code is the solution to my problem. I manually wrote the save.