keep code in localStorage
This commit is contained in:
@@ -13,14 +13,19 @@ import SplitterPanel from 'primevue/splitterpanel';
|
|||||||
|
|
||||||
import { defineComponent, shallowRef } from 'vue';
|
import { defineComponent, shallowRef } from 'vue';
|
||||||
|
|
||||||
|
const STORAGE_KEY_CODE = 'code';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
Splitter, SplitterPanel,
|
Splitter, SplitterPanel,
|
||||||
Result, Code,
|
Result, Code,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
const lsCode = localStorage.getItem(STORAGE_KEY_CODE);
|
||||||
|
const code = { value: lsCode ? lsCode : WELCOME_CODE };
|
||||||
|
|
||||||
return {
|
return {
|
||||||
code: { value: WELCOME_CODE },
|
code,
|
||||||
worker: null,
|
worker: null,
|
||||||
result: '',
|
result: '',
|
||||||
}
|
}
|
||||||
@@ -29,6 +34,13 @@ export default defineComponent({
|
|||||||
this.run(this.code.value);
|
this.run(this.code.value);
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
save(code) {
|
||||||
|
localStorage.setItem(STORAGE_KEY_CODE, code);
|
||||||
|
},
|
||||||
|
change(code) {
|
||||||
|
this.run(code);
|
||||||
|
setTimeout(() => this.save(code), 1);
|
||||||
|
},
|
||||||
run(code) {
|
run(code) {
|
||||||
this.terminate();
|
this.terminate();
|
||||||
this.result = '';
|
this.result = '';
|
||||||
@@ -53,8 +65,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@@ -77,7 +88,7 @@ main {
|
|||||||
<main>
|
<main>
|
||||||
<Splitter style="height: 100%" :step="50" :gutterSize="8" layout="horizontal">
|
<Splitter style="height: 100%" :step="50" :gutterSize="8" layout="horizontal">
|
||||||
<SplitterPanel class="left-pane">
|
<SplitterPanel class="left-pane">
|
||||||
<Code :code="code" @change="run($event)"/>
|
<Code :code="code" @change="change($event)"/>
|
||||||
</SplitterPanel>
|
</SplitterPanel>
|
||||||
<SplitterPanel class="right-pane">
|
<SplitterPanel class="right-pane">
|
||||||
<Result :data="result"/>
|
<Result :data="result"/>
|
||||||
|
|||||||
Reference in New Issue
Block a user