HTML表单全字段提交时页面刷新问题求助（附代码）

你遇到的页面刷新问题，核心是表单默认提交行为：

• 只填3个字段时，浏览器的required验证不通过，自动阻止了表单提交，所以页面不会刷新；
• 填完所有4个字段后，验证通过，浏览器触发表单默认提交动作，导致页面刷新。

另外你的sessionStorage用法也存在错误，下面是完整修正方案：

一、解决页面刷新问题 #

有两种简单方法可以阻止表单默认提交：

方法1：修改表单的onsubmit属性 #

把form标签的onsubmit="false"改成onsubmit="return false;"，彻底禁用表单默认提交：

<form onsubmit="return false;">

方法2：在按钮点击事件中阻止默认行为 #

在你的点击事件回调里加入event.preventDefault()，直接阻止按钮触发的提交动作：

addBtn.addEventListener("click", (event) => {
    event.preventDefault(); // 新增此行，阻止默认提交
    let userTitle = document.getElementById("title").value;
    let userAuthor = document.getElementById("author").value;
    let userGenre = document.getElementById("genre").value;
    let userReview = document.getElementById("reviews").value;

    const newObj = new Books(userTitle, userAuthor, userGenre, userReview);
    myArray.push(newObj)
    console.log(newObj)
    sessionStorage.setItem("array", JSON.stringify(myArray));
})

二、修正sessionStorage存储问题 #

sessionStorage只能存储字符串，直接存数组会被转成无意义的"[object Object]"格式，必须先转成JSON字符串，读取时再解析：

// 初始化数组时，先读取sessionStorage里的内容，避免页面刷新后数据丢失
let myArray = JSON.parse(sessionStorage.getItem("array")) || [];

// 存储时转成JSON字符串
sessionStorage.setItem("array", JSON.stringify(myArray));

// 读取时解析为对象数组
const storedBooks = JSON.parse(sessionStorage.getItem("array")) || [];

三、添加图书展示逻辑（可选） #

你页面里的bookTitle等标签未被使用，可以新增渲染函数展示数组内容：

function renderBooks() {
    // 获取展示元素
    const titleEl = document.getElementById("bookTitle");
    const authorEl = document.getElementById("bookAuthor");
    const genreEl = document.getElementById("bookGenre");
    const reviewEl = document.getElementById("bookReview");
    
    // 清空原有内容
    titleEl.innerHTML = "<strong>书名：</strong>";
    authorEl.innerHTML = "<strong>作者：</strong>";
    genreEl.innerHTML = "<strong>类型：</strong>";
    reviewEl.innerHTML = "<strong>书评：</strong>";
    
    // 遍历数组渲染每本书
    myArray.forEach(book => {
        titleEl.innerHTML += `<br>${book.Title}`;
        authorEl.innerHTML += `<br>${book.Author}`;
        genreEl.innerHTML += `<br>${book.Genre}`;
        reviewEl.innerHTML += `<br>${book.Review}`;
    });
}

// 在添加新书后调用渲染函数
addBtn.addEventListener("click", (event) => {
    event.preventDefault();
    // ... 原有获取输入、创建对象的代码
    myArray.push(newObj);
    renderBooks(); // 新增此行
    sessionStorage.setItem("array", JSON.stringify(myArray));
})

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