mirror of
https://github.com/bendtherules/piktochart-create-editor.git
synced 2026-08-18 13:52:56 +00:00
Add localstorage save and load
This commit is contained in:
@@ -17,6 +17,8 @@ interface CreateEditorAppState {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
|
export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
|
||||||
|
localStorageKey: 'appData';
|
||||||
|
|
||||||
constructor(props: {}) {
|
constructor(props: {}) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
@@ -32,6 +34,7 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
this.loadFromLocalStorage();
|
||||||
this.fetchImages();
|
this.fetchImages();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -54,6 +57,24 @@ export class CreateEditorApp extends React.Component<{}, CreateEditorAppState> {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentDidUpdate() {
|
||||||
|
this.saveToLocalStorage();
|
||||||
|
}
|
||||||
|
|
||||||
|
saveToLocalStorage() {
|
||||||
|
const stateJSON = JSON.stringify(this.state);
|
||||||
|
localStorage.setItem(this.localStorageKey, stateJSON);
|
||||||
|
}
|
||||||
|
|
||||||
|
loadFromLocalStorage() {
|
||||||
|
const stateJSON = localStorage.getItem(this.localStorageKey);
|
||||||
|
|
||||||
|
if (stateJSON) {
|
||||||
|
const stateObject = JSON.parse(stateJSON);
|
||||||
|
this.setState(stateObject);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
addOrUpdateTextNode(nodeId: string, textNode: CanvasTextNode): void {
|
addOrUpdateTextNode(nodeId: string, textNode: CanvasTextNode): void {
|
||||||
this.setState((prevState) => {
|
this.setState((prevState) => {
|
||||||
const newState = deppCloneNaive(prevState as CreateEditorAppState);
|
const newState = deppCloneNaive(prevState as CreateEditorAppState);
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
|
|
||||||
padding: 0.25em;
|
padding: 0.25em;
|
||||||
border: 1px solid black;
|
border: 1px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.draggable-node.selected {
|
.draggable-node.selected {
|
||||||
|
|||||||
Reference in New Issue
Block a user