表单中的本地存储怎么用？如何保存表单数据到localStorage？

input

event.target.value

JSON.stringify()

JSON.parse()

// 假设有一个简单的表单
// <form id="myForm">
//   <input type="text" id="username" name="username" placeholder="用户名">
//   <input type="email" id="email" name="email" placeholder="邮箱">
//   <textarea id="message" name="message" placeholder="留言"></textarea>
//   <button type="submit">提交</button>
//   <button type="button" id="clearStorage">清除本地数据</button>
// </form>

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('myForm');
    if (!form) return;

    // 尝试从localStorage加载数据
    const savedData = localStorage.getItem('formData');
    if (savedData) {
        try {
            const data = JSON.parse(savedData);
            for (const key in data) {
                const element = form.elements[key];
                if (element) {
                    element.value = data[key];
                }
            }
        } catch (e) {
            console.error("解析本地存储数据失败:", e);
            // 出现解析错误时，可能需要清除旧的错误数据
            localStorage.removeItem('formData');
        }
    }

    // 监听表单输入变化，实时保存
    form.addEventListener('input', () => {
        const formData = {};
        // 遍历表单所有可输入元素
        Array.from(form.elements).forEach(element => {
            if (element.name && element.type !== 'submit' && element.type !== 'button') {
                formData[element.name] = element.value;
            }
        });
        localStorage.setItem('formData', JSON.stringify(formData));
    });

    // 提交表单后，通常会清除本地存储的数据
    form.addEventListener('submit', () => {
        localStorage.removeItem('formData');
        // 实际应用中，这里可能会有异步提交，清除操作应在提交成功后进行
    });

    // 提供一个手动清除本地存储的按钮
    const clearButton = document.getElementById('clearStorage');
    if (clearButton) {
        clearButton.addEventListener('click', () => {
            localStorage.removeItem('formData');
            // 清除后，可以清空表单字段，或者刷新页面
            form.reset(); // 重置表单所有字段
            alert('本地存储的表单数据已清除。');
        });
    }
});

localStorage

sessionStorage

Cookies

localStorage

localStorage

sessionStorage

localStorage

sessionStorage

Cookies

Cookies

localStorage

sessionStorage

Cookies

HttpOnly

Secure

SameSite

localStorage

localStorage

localStorage

JSON.stringify()

JSON.parse()

localStorage

localStorage

<!-- 假设有一个爱好选择，可以多选 -->
<div id="hobbies">
  <label><input type="checkbox" name="hobbies" value="reading"> 阅读</label>
  <label><input type="checkbox" name="hobbies" value="travel"> 旅行</label>
  <label><input type="checkbox" name="hobbies" value="coding"> 编程</label>
</div>

<!-- 假设有一个联系方式列表，可以动态添加 -->
<div id="contactInfo">
  <input type="text" name="phone" placeholder="电话">
  <input type="text" name="email_contact" placeholder="备用邮箱">
</div>

// 保存时
form.addEventListener('input', () => {
    const formData = {};
    // ... 其他简单字段的收集 ...

    // 收集爱好（checkboxes）
    const hobbies = [];
    document.querySelectorAll('input[name="hobbies"]:checked').forEach(checkbox => {
        hobbies.push(checkbox.value);
    });
    formData.hobbies = hobbies; // 这是一个数组

    // 收集联系信息（这里假设是一个对象）
    formData.contact = {
        phone: form.elements.phone.value,
        email: form.elements.email_contact.value
    }; // 这是一个对象

    localStorage.setItem('complexFormData', JSON.stringify(formData));
});

// 加载时
const savedComplexData = localStorage.getItem('complexFormData');
if (savedComplexData) {
    try {
        const data = JSON.parse(savedComplexData);
        // ... 填充其他简单字段 ...

        // 填充爱好
        if (data.hobbies && Array.isArray(data.hobbies)) {
            document.querySelectorAll('input[name="hobbies"]').forEach(checkbox => {
                checkbox.checked = data.hobbies.includes(checkbox.value);
            });
        }

        // 填充联系信息
        if (data.contact) {
            if (form.elements.phone) form.elements.phone.value = data.contact.phone || '';
            if (form.elements.email_contact) form.elements.email_contact.value = data.contact.email || '';
        }

    } catch (e) {
        console.error("解析复杂本地存储数据失败:", e);
    }
}

JSON.stringify()

JSON.parse()