diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html index b0cfd27..7898e73 100644 --- a/app/templates/userpage_get.html +++ b/app/templates/userpage_get.html @@ -293,30 +293,82 @@ } } function saveArticle() { - const articleTitle = document.getElementById('article_title').innerText; // 获取文章标题 - const article = document.getElementById('article').innerText; // 获取文章内容 - const savedArticlesDropdown = document.getElementById('saved_articles_dropdown'); // 获取下拉菜单 - var option = document.createElement('option'); // 创建一个新的下拉菜单选项 - option.text = articleTitle; // 将文章标题作为选项文本 - option.value = article; // 将文章内容作为选项值 - option.title = article; // 将文章内容作为工具提示内容 - savedArticlesDropdown.appendChild(option); // 将选项添加到下拉菜单中 - localStorage.setItem(articleTitle, article) //将标记文章存储到localstorage中 - alert("文章已标记") -} - window.onload = function() { + const article = { + user_level: document.getElementById('user_level').innerText, + text_level: document.getElementById('text_level').innerText, + date: document.getElementById('date').innerText.replace('Article added on: ', ''), + article_title: document.getElementById('article_title').innerText, + article_body: document.getElementById('article').innerText, + source: document.getElementById('source').innerText, + question: document.getElementById('question').innerText, + answer: document.getElementById('answer').innerText + }; + + const articleJSON = JSON.stringify(article); + const articleTitle = article.article_title; const savedArticlesDropdown = document.getElementById('saved_articles_dropdown'); - for (let i = 0; i < localStorage.length; i++) { - const key = localStorage.key(i); // 获取localStorage中的键 - const value = localStorage.getItem(key); // 获取localStorage中的值 - // 创建一个新的下拉菜单选项 - var option = document.createElement('option'); - option.text = key; // 将文章标题作为选项文本 - option.value = value; // 将文章内容作为选项值 - option.title = value; // 将文章内容作为工具提示内容 - savedArticlesDropdown.appendChild(option); // 将选项添加到下拉菜单中 + + var option = document.createElement('option'); + option.text = articleTitle; + option.value = articleJSON; // 存储序列化的JSON字符串 + option.title = article.article_title; + savedArticlesDropdown.appendChild(option); + localStorage.setItem(articleTitle, articleJSON); // 以文章标题为键,序列化的JSON字符串为值存储 + alert("文章已标记"); +} + function loadSelectedArticle() { + const selectedOption = document.getElementById('saved_articles_dropdown'); + const selectedTitle = selectedOption.options[selectedOption.selectedIndex].text; + const articleJSON = localStorage.getItem(selectedTitle); + + if (articleJSON) { + const today_article = JSON.parse(articleJSON); // 解析JSON字符串为对象 + update(today_article); // 使用解析出的对象更新页面 } } + + window.onload = function() { + const savedArticlesDropdown = document.getElementById('saved_articles_dropdown'); + savedArticlesDropdown.addEventListener('change', loadSelectedArticle); + + // 先清空dropdown,以防有多余的选项或重新加载页面时出现重复 + savedArticlesDropdown.innerHTML = ''; + + // 获取localStorage中最后一个(最新)的键值对 + let latestKey, latestValue; + for (let i = 0; i < localStorage.length; i++) { + const key = localStorage.key(i); + const value = localStorage.getItem(key); + if (!latestKey) { // 第一次迭代时设置最新文章 + latestKey = key; + latestValue = value; + } + } + + // 首先添加最新保存的文章到下拉菜单 + if (latestKey && latestValue) { + var latestOption = document.createElement('option'); + latestOption.text = latestKey; + latestOption.value = latestValue; + latestOption.title = latestValue; + savedArticlesDropdown.appendChild(latestOption); + } + + // 接着遍历其余文章并添加到下拉菜单 + for (let i = 0; i < localStorage.length; i++) { + const key = localStorage.key(i); + const value = localStorage.getItem(key); + // 确保不重复添加最新文章 + if (key !== latestKey) { + var option = document.createElement('option'); + option.text = key; + option.value = value; + option.title = value; + savedArticlesDropdown.appendChild(option); + } + } + savedArticlesDropdown.selectedIndex = -1; +}