html内使用JSON储存图书信息

在HTML中使用JSON存储图书信息通常是为了提供数据驱动的方式，便于前端展示和处理数据。HTML本身并不直接支持JSON存储，但是可以在服务器端生成JSON格式的数据，然后通过HTTP请求获取并在客户端解析。

首先，假设你在服务器端（例如Node.js、PHP、Python等）有一个包含图书信息的JSON对象，例如：

{
    "books": [
        {
            "id": 1,
            "title": "书名1",
            "author": "作者1",
            "year": 2020
        },
        {
            "id": 2,
            "title": "书名2",
            "author": "作者2",
            "year": 2019
        }
    ]
}

然后，你可以通过AJAX或者Fetch API等前端技术向服务器发送GET请求，获取JSON数据：

fetch('path_to_books_api.json')
    .then(response => response.json()) // 解析JSON
    .then(data => {
        const books = data.books; // 获取到图书数组
        // 现在可以在HTML中动态渲染书籍列表
        renderBooks(books);
    });

在`renderBooks`函数中，你可以遍历`books`数组，将每个图书的信息插入到HTML模板中：

function renderBooks(books) {
    let bookList = '';
    for (const book of books) {
        bookList += `
            <li>
                <h3>${book.title}</h3>
                <p>作者：${book.author}, 发布年份：${book.year}</p>
            </li>
        `;
    }
    document.getElementById('book-container').innerHTML = bookList;
}

这将在页面上创建一个动态的图书列表，每个图书项都是从JSON中提取的信息。