深入理解HTML表单与JavaScript交互：避免按钮默认提交导致页面刷新

<!-- 原始的、可能导致刷新的按钮 -->
<button id="addBttn">Add</button>

<!-- 修正后的按钮，明确指定类型为 "button" -->
<button type="button" id="addBttn">Add</button>

<form id="bookForm">
    <label for="title">请填写书名:</label>
    <input type="text" name="title" id="title" required><br/>

    <label for="author">请填写作者:</label>
    <input type="text" name="author" id="author" required><br/>

    <label for="genre">请填写类型:</label>
    <input type="text" name="genre" id="genre" required><br/>

    <label for="reviews">请填写评论:</label>
    <input type="text" name="reviews" id="reviews" required>

    <!-- 按钮可以是 type="submit" 或不指定type -->
    <button type="submit" id="addBttn">Add</button>
</form>

// booksJS.js

let myArray = []; // 用于存储图书对象的数组

// 定义图书类
class Books {
    constructor(Title, Author, Genre, Review) {
        this.Title = Title;
        this.Author = Author;
        this.Genre = Genre;
        this.Review = Review;
    }

    // 提供获取属性的方法
    getTitle() { return this.Title; }
    getAuthor() { return this.Author; }
    getGenre() { return this.Genre; }
    getReview() { return this.Review; }
}

// 获取表单元素
const bookForm = document.getElementById("bookForm");

// 页面加载时尝试从sessionStorage中恢复数据
function loadBooksFromSessionStorage() {
    const storedArray = sessionStorage.getItem("bookCatalogue");
    if (storedArray) {
        // 解析JSON字符串为JavaScript数组
        myArray = JSON.parse(storedArray);
        console.log("已从sessionStorage加载数据:", myArray);
        displayBooks(); // 加载后显示数据
    } else {
        myArray = [];
    }
}

// 监听表单的 submit 事件
bookForm.addEventListener("submit", (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
    // 注意：需要将JavaScript对象或数组转换为JSON字符串才能正确存储
    sessionStorage.setItem("bookCatalogue", JSON.stringify(myArray));

    // 清空表单字段
    bookForm.reset();

    // 更新页面显示
    displayBooks();
});

// 示例：一个简单的函数来显示数组中的最新图书信息
function displayBooks() {
    const bookTitleP = document.getElementById("bookTitle");
    const bookAuthorP = document.getElementById("bookAuthor");
    const bookGenreP = document.getElementById("bookGenre");
    const bookReviewP = document.getElementById("bookReview");

    if (myArray.length > 0) {
        const lastBook = myArray[myArray.length - 1];
        bookTitleP.textContent = `书名: ${lastBook.getTitle()}`;
        bookAuthorP.textContent = `作者: ${lastBook.getAuthor()}`;
        bookGenreP.textContent = `类型: ${lastBook.getGenre()}`;
        bookReviewP.textContent = `评论: ${lastBook.getReview()}`;
    } else {
        bookTitleP.textContent = "暂无图书信息";
        bookAuthorP.textContent = "";
        bookGenreP.textContent = "";
        bookReviewP.textContent = "";
    }
}

// 页面加载完成后立即调用，以初始化数据和显示
document.addEventListener("DOMContentLoaded", loadBooksFromSessionStorage);