add remeber markmap state

GuoXiCheng · May 30, 2024 · da3bfcc · da3bfcc
1 parent 0f35715
commit da3bfcc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/src/MarkMap.vue b/src/MarkMap.vue
@@ -26,7 +26,16 @@ export default {
             if (assets.styles) loadCSS(assets.styles);
             if (assets.scripts) loadJS(assets.scripts, { getMarkmap: () => window.markmap });
 
-            Markmap.create('#markmap', null, root);
+            const savedState = JSON.parse(localStorage.getItem('markmap-state'));
+            const markmapState = savedState ? savedState : root;
+
+            const markmap = Markmap.create('#markmap', null, markmapState);
+
+            for (const item of document.getElementsByTagName('circle')) {
+                item.addEventListener('click', () => {
+                    localStorage.setItem('markmap-state', JSON.stringify(markmap.state.data));
+                });
+            }
         });
     }
 };

diff --git a/src/index.md b/src/index.md
@@ -8,7 +8,7 @@ import MarkMap from './MarkMap.vue';
 </script>
 
 <MarkMap markdown="
-- JS全栈
+- JS全栈知识体系
   - JavaScript
       - JavaScript 介绍
         - [JavaScript 发展历程](javascript/introduction/history-of-javascript)
@@ -17,7 +17,11 @@ import MarkMap from './MarkMap.vue';
         - [ES 的版本](javascript/ecma-script/es-version)
         - JavaScript 引擎
           - [调用栈](javascript/ecma-script/javascript-engine/call-stack)
-          - [作用域](javascript/ecma-script/javascript-engine/scope)
+          - 作用域
+            - [什么是作用域](javascript/ecma-script/javascript-engine/scope#什么是作用域)
+            - [全局作用域](javascript/ecma-script/javascript-engine/scope#全局作用域)
+            - [函数作用域](javascript/ecma-script/javascript-engine/scope#函数作用域)
+            - [块级作用域](javascript/ecma-script/javascript-engine/scope#块级作用域)
           - [作用域链](javascript/ecma-script/javascript-engine/scope-chain)
           - [this 关键字](javascript/ecma-script/javascript-engine/this-keyword)
         - [变量声明](javascript/ecma-script/variable-declaration)

diff --git a/src/javascript/ecma-script/javascript-engine/scope.md b/src/javascript/ecma-script/javascript-engine/scope.md
@@ -14,7 +14,7 @@ JavaScript 遵循词法作用域。
 
 :::
 
-### 全局作用域
+## 全局作用域
 
 全局作用域是指在代码中任何地方都能访问的变量和函数。
 
@@ -26,7 +26,7 @@ function foo() {
 foo(); // 1
 ```
 
-### 函数作用域
+## 函数作用域
 
 函数作用域是指在函数内部定义的变量和函数只能在函数内部访问。
 
@@ -39,7 +39,7 @@ foo(); // 1
 console.log(a); // ReferenceError: a is not defined
 ```
 
-### 块级作用域
+## 块级作用域
 
 块级作用域是指在代码块内部定义的变量和函数只能在代码块内部访问。