[{"data":1,"prerenderedAt":197},["ShallowReactive",2],{"docs:\u002Fen\u002Fdocs\u002Fguides\u002Fstorage":3},{"id":4,"title":5,"body":6,"description":187,"extension":188,"meta":189,"navigation":192,"path":193,"seo":194,"stem":195,"__hash__":196},"docs_en\u002Fen\u002Fdocs\u002Fguides\u002Fstorage.md","Saving and restoring",{"type":7,"value":8,"toc":181},"minimark",[9,14,18,22,25,29,32,36,44,177],[10,11,13],"h2",{"id":12},"what-to-store","What to store",[15,16,17],"p",{},"getJSON returns an independent structural snapshot. getCSS returns the separate stylesheet; JSON alone does not contain CSS. Store both from the same applied revision. You can also retain getHTML for publishing. Change events provide html\u002Fjson\u002Fcss\u002Frevision of the applied document.",[10,19,21],{"id":20},"application-persistence","Application persistence",[15,23,24],{},"ViText itself does not write to a server. Your application implements debounce, authentication, request ordering, retries and conflict handling. Never treat selection changes as document writes. Source errors preserve the last valid document, not the unvalidated draft.",[10,26,28],{"id":27},"restore-a-snapshot","Restore a snapshot",[15,30,31],{},"Read your saved JSON\u002FCSS and await setContent(json, { css }). Validate external data before publishing. A new editor also accepts initial structured content and stylesheet, with whenReady for asynchronous CSS initialization.",[10,33,35],{"id":34},"browser-example","Browser example",[15,37,38,43],{},[39,40,42],"a",{"href":41},"\u002Fen\u002Fexamples\u002Fstorage","The storage example"," has separate Save snapshot and Restore snapshot buttons. Save explicitly writes JSON+CSS to this browser's localStorage. Edit the text afterward, then restore to see the saved version return. Reloading the example does not erase that snapshot. It is not shared with another browser\u002Fdevice or a server; Delete snapshot clears it.",[45,46,51],"pre",{"className":47,"code":48,"language":49,"meta":50,"style":50},"language-ts shiki shiki-themes github-dark","const unsubscribe = editor.on('change', event => {\n  const snapshot = { json: event.json, css: event.css, revision: event.revision };\n  console.log(snapshot);\n});\nconst snapshot = { json: editor.getJSON(), css: editor.getCSS() };\nawait editor.setContent(snapshot.json, { css: snapshot.css });\nunsubscribe();\n","ts","",[52,53,54,98,112,124,130,154,168],"code",{"__ignoreMap":50},[55,56,59,63,67,70,74,78,81,85,88,92,95],"span",{"class":57,"line":58},"line",1,[55,60,62],{"class":61},"snl16","const",[55,64,66],{"class":65},"sDLfK"," unsubscribe",[55,68,69],{"class":61}," =",[55,71,73],{"class":72},"s95oV"," editor.",[55,75,77],{"class":76},"svObZ","on",[55,79,80],{"class":72},"(",[55,82,84],{"class":83},"sU2Wk","'change'",[55,86,87],{"class":72},", ",[55,89,91],{"class":90},"s9osk","event",[55,93,94],{"class":61}," =>",[55,96,97],{"class":72}," {\n",[55,99,101,104,107,109],{"class":57,"line":100},2,[55,102,103],{"class":61},"  const",[55,105,106],{"class":65}," snapshot",[55,108,69],{"class":61},[55,110,111],{"class":72}," { json: event.json, css: event.css, revision: event.revision };\n",[55,113,115,118,121],{"class":57,"line":114},3,[55,116,117],{"class":72},"  console.",[55,119,120],{"class":76},"log",[55,122,123],{"class":72},"(snapshot);\n",[55,125,127],{"class":57,"line":126},4,[55,128,129],{"class":72},"});\n",[55,131,133,135,137,139,142,145,148,151],{"class":57,"line":132},5,[55,134,62],{"class":61},[55,136,106],{"class":65},[55,138,69],{"class":61},[55,140,141],{"class":72}," { json: editor.",[55,143,144],{"class":76},"getJSON",[55,146,147],{"class":72},"(), css: editor.",[55,149,150],{"class":76},"getCSS",[55,152,153],{"class":72},"() };\n",[55,155,157,160,162,165],{"class":57,"line":156},6,[55,158,159],{"class":61},"await",[55,161,73],{"class":72},[55,163,164],{"class":76},"setContent",[55,166,167],{"class":72},"(snapshot.json, { css: snapshot.css });\n",[55,169,171,174],{"class":57,"line":170},7,[55,172,173],{"class":76},"unsubscribe",[55,175,176],{"class":72},"();\n",[178,179,180],"style",{},"html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":50,"searchDepth":100,"depth":100,"links":182},[183,184,185,186],{"id":12,"depth":100,"text":13},{"id":20,"depth":100,"text":21},{"id":27,"depth":100,"text":28},{"id":34,"depth":100,"text":35},"Consistent JSON\u002FCSS snapshots, events and application-owned storage.","md",{"group":190,"order":191},"Document guides",22,true,"\u002Fen\u002Fdocs\u002Fguides\u002Fstorage",{"title":5,"description":187},"en\u002Fdocs\u002Fguides\u002Fstorage","JnA6-XqBk5fTYhYWL6XlVxOpiXU9QSXAENh3wGCo1Zs",1792670389520]