显示历史对话

src/views/AiEmotion.vue

@@ -142,6 +142,19 @@ const isPageLoaded = ref(false); // 控制页面是否显示
 const isRotating = ref(false);//控制旋转
 const userInputDisplayRef = ref(null);//消息区域的引用
 
+// 从本地存储中加载对话历史的方法
+const loadMessagesFromLocalStorage = () => {
+    const storedMessages = localStorage.getItem('chatMessages');
+    if (storedMessages) {
+        messages.value = JSON.parse(storedMessages);
+    }
+};
+
+// 将对话历史保存到本地存储的方法
+const saveMessagesToLocalStorage = () => {
+    localStorage.setItem('chatMessages', JSON.stringify(messages.value));
+};
+
 // 触发图片旋转的方法
 function startImageRotation() {
     isRotating.value = true;
@@ -239,6 +252,9 @@ async function sendMessage() {
         } finally {
             // 停止图片旋转
             isRotating.value = false;
+
+            // 保存对话历史到本地存储
+            saveMessagesToLocalStorage();
         }
     } else {
         messages.value.push({
@@ -400,6 +416,7 @@ function renderCharts(data) {
 // 页面挂载完成后触发图片旋转
 onMounted(() => {
     startImageRotation();
+    loadMessagesFromLocalStorage();//加载历史对话
 });
 
 </script>