I suggest displaying the overall list of values truncated in UI to something sane like 500 characters (2560px wide screen fits ~256 chars). The full string will be displayed on click, of course.
Also, in case of synchronous storage (localStorage, sessionStorage) you can display key names almost instantaneously with Object.keys(localStorage), then display a CSS "loading" animation (maybe delay it for 50-100ms in case the values are fetched sooner), then fetch the values like setTimeout(fetchValues, 0).
And finally, textarea and text input are extremely slow in Chrome (apparently because of the spellchecker that cannot be disabled), so I suggest using a light js editor like CodeMirror (it's used in Chrome, FF, and many other apps) that can properly edit huge amounts of text, provides syntax highlighters.
I suggest displaying the overall list of values truncated in UI to something sane like 500 characters (2560px wide screen fits ~256 chars). The full string will be displayed on click, of course.
Also, in case of synchronous storage (localStorage, sessionStorage) you can display key names almost instantaneously with
Object.keys(localStorage)
, then display a CSS "loading" animation (maybe delay it for 50-100ms in case the values are fetched sooner), then fetch the values likesetTimeout(fetchValues, 0)
.And finally,
textarea
and textinput
are extremely slow in Chrome (apparently because of the spellchecker that cannot be disabled), so I suggest using a light js editor like CodeMirror (it's used in Chrome, FF, and many other apps) that can properly edit huge amounts of text, provides syntax highlighters.