使用localStorage保存与展示表单提交数据遇到问题

用户问题 #

我正在自学JavaScript，尝试编写一个基础脚本，实现从HTML表单获取信息并在页面展示的功能。目前提交表单会生成卡片展示提交的信息，每次提交新增一张卡片，但页面刷新后所有卡片都会消失。

我尝试使用localStorage，已添加基础函数，但刷新后卡片仍消失，现请教两个问题：

1. 如何检查表单提交的数据是否已成功保存？
2. 如何修改代码，让页面刷新后仍能展示已有的卡片？

原HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flashcard Project</title>
    <link rel="stylesheet" href="./flashcard_styles.css">
</head>
<body>
    <div class="form-wrapper">
        <h1 class="form-title">Add a word</h1>
        <form id="vocab-form" method="POST">
            <div class="input-group">
                <label for="word">Word</label>
                <input id="word" name="word" type="text" placeholder="詞彙">
            </div>
            <div class="input-group">
                <label for="meaning">Meaning</label>
                <input id="meaning" name="meaning" type="text" placeholder="vocabulary">
            </div>
            <div class="input-group">
                <label for="notes">Notes</label>
                <textarea id="notes" name="notes" rows="6" cols="30"></textarea>
            </div>
            <button id="submit" type="submit" value="submit">Add</button>
        </form>
    </div>
    <div class="vocab-grid">
    </div>

    <script src="./flashcard_script.js"></script>
</body>
</html>

原JavaScript代码 #

const myVocab = [];

function saveData() {
    localStorage.setItem('myVocab', JSON.stringify(myVocab));
}

function loadData() {
    const storedData = localStorage.getItem('myVocab');
    if(storedData) {
        myVocab.push(...JSON.parse(storedData));
    }
}

loadData();

const form = document.querySelector('form');
const vocabGrid = document.querySelector('.vocab-grid');

// define a constructor function to create vocab objects
function Vocab(word, meaning, notes) {
    this.word = word;
    this.meaning = meaning;
    this.notes = notes;
}

// define a function to add new Vocab to myVocab on form submit click
function addVocab(event) {
    event.preventDefault();

    const data = new FormData(event.target);

    let formObj = {}; // initialize empty object to store form values

    // loop thru FormData entried
    for(let [key, value] of data.entries()) {
        formObj[key] = value; // stores the values with their keys within the formObj object
    }

    // convert the stored formObj to a more useful newVocab object, using the constructor function created above
    const newVocab = new Vocab(formObj.word, formObj.meaning, formObj.notes);
    
    myVocab.push(newVocab);

    // clear form after submission
    event.target.reset();

    // save the form submission data to localStorage
    saveData();

    return newVocab;
}

// this function will run every time the submit button is clicked
form.addEventListener('submit', function(event) {

    // first, call the addVocab function, store its result in a new variable
    const addedVocab = addVocab(event);

    // second, create the DOM elements needed to display the vocab on a card
    const newVocabCard = document.createElement('div');
    newVocabCard.classList.add('vocab-card');
    newVocabCard.style.cssText = `
        padding: 10px;
        border: 3px solid black;
        color: var(--drkPurple);
        background-color: white;
        border-radius: 5px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);`

    const vocabWord = document.createElement('p');
    vocabWord.innerText = addedVocab.word;

    const vocabMeaning = document.createElement('p');
    vocabMeaning.innerText = addedVocab.meaning;

    const vocabNotes = document.createElement('p');
    vocabNotes.innerText = addedVocab.notes;

    newVocabCard.appendChild(vocabWord);
    newVocabCard.appendChild(vocabMeaning);
    newVocabCard.appendChild(vocabNotes);

    vocabGrid.appendChild(newVocabCard);
});

问题解答 #

1. 检查表单数据是否成功保存到localStorage #

有两种简单方法：

• 开发者工具查看：打开浏览器开发者工具（快捷键F12/Ctrl+Shift+I），切换到Application（Chrome）或Storage（Firefox）标签，展开左侧Local Storage，点击当前域名即可看到myVocab条目，点击可查看存储的JSON数据。
• 控制台命令查看：在开发者工具的Console标签中输入以下命令：

  // 获取存储的原始字符串
  localStorage.getItem('myVocab')
  // 解析为数组查看具体内容
  JSON.parse(localStorage.getItem('myVocab'))
  

2. 修改代码实现刷新后保留卡片 #

核心是把创建卡片的逻辑抽成独立函数，在页面加载时渲染本地存储的所有数据。修改后的JavaScript代码如下：

const myVocab = [];
const form = document.querySelector('form');
const vocabGrid = document.querySelector('.vocab-grid');

function saveData() {
    localStorage.setItem('myVocab', JSON.stringify(myVocab));
}

function loadData() {
    const storedData = localStorage.getItem('myVocab');
    if(storedData) {
        myVocab.push(...JSON.parse(storedData));
    }
}

// 定义创建卡片的独立函数，接收词汇对象作为参数
function createVocabCard(vocab) {
    const newVocabCard = document.createElement('div');
    newVocabCard.classList.add('vocab-card');
    newVocabCard.style.cssText = `
        padding: 10px;
        border: 3px solid black;
        color: var(--drkPurple);
        background-color: white;
        border-radius: 5px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);`

    const vocabWord = document.createElement('p');
    vocabWord.innerText = vocab.word;

    const vocabMeaning = document.createElement('p');
    vocabMeaning.innerText = vocab.meaning;

    const vocabNotes = document.createElement('p');
    vocabNotes.innerText = vocab.notes;

    newVocabCard.appendChild(vocabWord);
    newVocabCard.appendChild(vocabMeaning);
    newVocabCard.appendChild(vocabNotes);

    vocabGrid.appendChild(newVocabCard);
}

// 页面加载时渲染所有本地存储的词汇卡片
function renderSavedVocabs() {
    myVocab.forEach(vocab => {
        createVocabCard(vocab);
    });
}

// 加载数据并渲染卡片
loadData();
renderSavedVocabs();

// 词汇构造函数
function Vocab(word, meaning, notes) {
    this.word = word;
    this.meaning = meaning;
    this.notes = notes;
}

function addVocab(event) {
    event.preventDefault();

    const data = new FormData(event.target);
    const formObj = {};

    for(let [key, value] of data.entries()) {
        formObj[key] = value;
    }

    const newVocab = new Vocab(formObj.word, formObj.meaning, formObj.notes);
    myVocab.push(newVocab);
    event.target.reset();
    saveData();

    return newVocab;
}

form.addEventListener('submit', function(event) {
    const addedVocab = addVocab(event);
    // 调用独立函数创建卡片
    createVocabCard(addedVocab);
});

修改说明：

1. 新增createVocabCard函数，把原来写在提交事件里的卡片创建逻辑抽出来，接收词汇对象作为参数，实现代码复用。
2. 新增renderSavedVocabs函数，遍历myVocab数组，调用createVocabCard渲染每一个词汇卡片。
3. 页面加载完成后，调用renderSavedVocabs，把本地存储的所有词汇渲染出来。
4. 表单提交事件里不再重复写卡片创建代码，直接调用createVocabCard生成新卡片。

内容的提问来源于stack exchange，提问作者AbigailDawson