Front-end eight-week class basic end-of-class homework project (with source code)

Mobile 2023-05-05 14:26:25 views: null

foreword

This article is a web course defense assignment for the first eight weeks of the first semester of the junior year. It uses the three front-end foundations of html, css, and JavaScript to make a simple page effect, and uses sessionStorage to achieve the effect of temporary storage.

According to the assignment requirements and the original model, I completed my assignment called "Book Information Management Page".

Homework highlights: displaying the publication date, using js to dynamically generate the year 1800-2022, and dealing with the date backfilling problem when clicking the modify function.

The basic functions are: add, edit, delete, view detailed information.

Page layout: three-frame structure.

Data requirements: At least five data displays.

page display

Home
insert image description here
Add Page

modify page

Details page
insert image description here

the code

A total of four html codes. Both css and js are written in html, no separate files are created

<!--<bookList.html>-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书信息管理</title>
    <style>
        body {
      
      
            margin: 0;
            padding: 0;
        }

        .all {
      
      
            margin: auto;
            width: 80%;
            height: 100%;
        }

        .left {
      
      
            width: 200px;
            height: 100vh;
            background-color: cornflowerblue;
            float: left;
        }

        .top {
      
      
            height: 60px;
            width: calc(100% - 200px);
            background-color: darkgray;
            float: right;
        }

        .content {
      
      
            width: calc(100% - 200px);
            height: calc(100vh - 60px - 40px);
            float: right;
        }

        .footer {
      
      
            height: 40px;
            width: calc(100% - 200px);
            background-color: darkgray;
            float: right;

        }


    </style>
</head>
<body>
<div class="all">

    <div class="left"></div>
    <div class="top"></div>
    <div class="content">
        <form style="padding-top: 10px">
            <table cellspacing="0" border="0" align="center" width="95%">
                <tr>
                    <td>图书馆信息管理列表&nbsp;
                        <a>
                            <button type="button" onclick="add()">添加</button>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table border="1" cellpadding="5" cellspacing="0" align="center" id="mytable" width="100%">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>书名</th>
                                <th>ISBN</th>
                                <th>开本</th>
                                <th>作者</th>
                                <th>出版社</th>
                                <th>出版日期</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="mytbody" align="center">

                            </tbody>
                        </table>
                    </td>
                </tr>

            </table>
        </form>

    </div>
    <div class="footer"></div>

</div>
<script>
    function add() {
      
      
        location.href = "addBook.html"
    }

    let bookList = sessionStorage.getItem('bookList');
    if (!bookList) {
      
      
        bookList = [
            {
      
      
                name: '张其成讲易经',
                ISBN: '9787545555530',
                size: '16开',
                writer: '张其成',
                press: '天地出版社',
                date: '2020年9月1日',
                introduce: '为什么说《易经》是中华文明的源头，儒释道共奉的经典？\n' +
                    '故宫三殿、清华大学的校训、上海交通大学的校名和《易经》有着怎样的关系？\n' +
                    '自强不息、物以类聚、正大光明等常用的成语都出自《易经》？\n' +
                    '身在职场，我们怎样运用《易经》的智慧与领导、同事相处？\n' +
                    '……\n' +
                    '本书凝聚张其成教授四十余年研究《易经》的精华和成果，作者将经义中的阴阳动静、得失吉凶与日常生活相结合，平实易懂。第一部分系统阐述《易经》的历史起源、文化内涵、卦爻辞的解读方法等基础知识，第二部分则详细解读《易经》的六十四卦、三百八十四句爻辞，帮助读者懂得知变应变的法则，获得做人、做事的启示。\n' +
                    '《易经》既是世界观，也是方法论。六十四卦，对应着世界和人生的六十四种场景，每个场景对应着不同的阶段。张其成教授侧重于揭示《易经》中蕴藏的中华文明基因，并融合现代的道德准则、管理策略、教育方法、人生态度等，帮助读者灵活运用《易经》解决现实生活中的困惑，做有大智慧、大格局的人。\n' +
                    '\n' +
                    '作者简介'
            },
            {
      
      
                name: '深入理解Linux网络技术内幕',
                ISBN: '9787508379647',
                size: '16开',
                writer: 'Benvenuti',
                press: '中国电力出版社',
                date: '2009年6月1日',
                introduce: 'Linux如此的流行正是得益于它的特性丰富及有效的网络协议栈。如果你曾经惊叹于Linux能够实现如此复杂的工作，或者你只是想通过现实中的例子学习现代网络，《深入理解Linux网络内幕》将会给你指导。同其他OReilly的流行书籍一样，《深入理解Linux网络内幕》清楚地阐述了网络的基本概念，并指导你如何用C语言实现。虽然早先的 TCP/IP经验是有用的，但初学者通过《深入理解Linux网络内幕》仍然可以学习到协议本身和大量的应用信息。一旦彻底掌握了这些网络工具，你就可以使用《深入理解Linux网络内幕》这本书所附的代码，准确地指出Linux内核中重要的部分如何工作。　　\n' +
                    '　　网络功能的实现或破坏在不同的时候是由不同的代码块完成的，这正是理解网络和实现它的难点中的一部分。《深入理解Linux网络内幕》该书的成功之一就是描述这些代码块如何集成，以及众多的函数和数据结构之间的关系。《深入理解Linux网络内幕》不仅描述了Linux网络的全貌，而且是理解Linux网络细节的有效指南。'

            },
            {
      
      
                name: '一百个人的十年',
                ISBN: '9787503946882',
                size: '16开',
                writer: '冯骥才',
                press: '文化艺术出版社',
                date: '2014年6月1日',
                introduce: '”已经过去，它对众多人的生活产生了深刻的影响。“”是什么？“”的真相到底是什么？“”到底对人产生了什么样的影响？《一百个人的十年》为我们似乎提供了一个清晰的答案。作者冯骥才试图以一百个各不相同的经历，尽可能反映这一经历十年、全社会大劫难异常复杂的全貌。通过记录普通人的经历，反映生活本质的真实。《一百个人的十年》将使“”的受难者们感受到某种东西以使内心获得宁静，使那些“”的制造者们从中受到人类良知的提醒而引起终生不安。'
            },
            {
      
      
                name: '处在十字路口的选择',
                ISBN: '9787218084817',
                size: '16开',
                writer: '沈志华',
                press: '广东人民出版社',
                date: '2013年2月1日',
                introduce: '为什么1956年的希望和期待会转变成1957年的失望和消沉；\n' +
                    '为什么八大在1956年确定了扩大民主、加强法制、集中精力搞建设的方针路线，到1957年却反其道而行之；\n' +
                    '为什么已经看到了苏联社会主义模式的种种弊端，到头来还要重蹈斯大林的覆辙，为什么一代精英百般思索却做出了如此选择，这一切究竟是怎么发生的？\n' +
                    '波兰、匈牙利危机中，中国充当了什么角色？\n' +
                    '沈志华著的《处在十字路口的选择(1956-1957年的中国)》试图利用目前所能看到的文献史料，描述这一历史过程。'
            },
            {
      
      
                name: '中国是从哪里来的·历史文化篇',
                ISBN: '9787553815886',
                size: '16开',
                writer: '周斌，詹茜卉',
                press: '岳麓书社',
                date: '2021年12月1日',
                introduce: '古代中国人可以吃牛肉吗？\n' +
                    '\n' +
                    '古人在漫漫长夜如何打发时间？\n' +
                    '\n' +
                    '我们的老祖宗起名有什么讲究？\n' +
                    '\n' +
                    '古代人也能协议离婚吗？\n' +
                    '\n' +
                    '历史上真实的接头暗号都什么样？\n' +
                    '\n' +
                    '...... ......\n' +
                    '\n' +
                    '本书聚焦众多生动有趣的“小问题”，如菜系由来、南北饮食差异、烹饪手法，古人的工作、娱乐、婚姻情况，以及一些流传至今的传统习俗的演变等等，探讨的是古人日常生活背后的“大历史”。本书试图从古人的点滴生活中揭示深层次的人文历史渊源，寻找文明的来源，弘扬中华优秀传统文化。角度新颖独到，语言妙趣横生，堪称一部老少咸宜的国民历史书。'
            }
        ]
        sessionStorage.setItem('bookList', JSON.stringify(bookList))
    } else {
      
      
        bookList = JSON.parse(sessionStorage.getItem('bookList'));
    }
    // alert(typeof bookList)

    let mytbody = document.getElementById("mytbody");
    for (let i = 0; i < bookList.length; i++) {
      
      
        let index = mytbody.rows.length;
        let newrow = mytbody.insertRow(index);
        // 序号
        let cell0 = newrow.insertCell(0);
        cell0.innerHTML = index + 1;
        //往单元格放内容
        let cell1 = newrow.insertCell(1);
        cell1.innerHTML = '<a οnclick="num(' + i + ')" href="bookInformation.html">' + bookList[i].name + '</a>';
        let cell2 = newrow.insertCell(2);
        cell2.innerHTML = bookList[i].ISBN;
        let cell3 = newrow.insertCell(3);
        cell3.innerHTML = bookList[i].size;
        let cell4 = newrow.insertCell(4);
        cell4.innerHTML = bookList[i].writer;
        let cell5 = newrow.insertCell(5);
        cell5.innerHTML = bookList[i].press;
        let cell6 = newrow.insertCell(6);
        cell6.innerHTML = bookList[i].date;
        let cell7 = newrow.insertCell(6);
        cell7.innerHTML = '<button οnclick="changeRow(' + i + ')">修改</button>' + '&nbsp;' + '<button οnclick="deleteRow(' + i + ')">删除</button>'
    }

    function changeRow(rowNum) {
      
      
        sessionStorage.setItem('index', rowNum);
        location.href = 'change.html';
        event.returnValue = false;
    }

    function deleteRow(rowNum) {
      
      
        let bookList = JSON.parse(sessionStorage.getItem('bookList'));
        mytbody.deleteRow(rowNum);
        bookList.splice(rowNum, 1);
        sessionStorage.setItem("bookList", JSON.stringify(bookList));
    }

    function num(num) {
      
      
        sessionStorage.setItem('index', num);
    }


</script>

</body>
</html>

<!--<addBook.html>-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书入库</title>
    <style>
        body {
      
      
            margin: 0;
            padding: 0;
        }

        .all {
      
      
            margin: auto;
            width: 60%;
            height: 100%;
        }

        .left {
      
      
            width: 200px;
            height: 100vh;
            background-color: cornflowerblue;
            float: left;
        }

        .top {
      
      
            height: 60px;
            width: calc(100% - 200px);
            background-color: darkgray;
            float: right;
        }

        .content {
      
      
            width: calc(100% - 200px);
            height: calc(100vh - 60px - 40px);
            float: right;
        }

        .footer {
      
      
            height: 40px;
            width: calc(100% - 200px);
            background-color: darkgray;
            float: right;

        }

        .form {
      
      
            margin-top: 80px;
        }


    </style>
</head>
<body>
<div class="all">

    <div class="left"></div>
    <div class="top"></div>
    <div class="content">
        <form class="form">
            <table cellspacing="0" border="0" align="center" width="80%">
                <tr>
                    <td>填写图书入馆信息</td>
                </tr>
                <tr>
                    <td>
                        <table cellspacing="0" cellpadding="3" border="1" align="center" width="100%">
                            <tr>
                                <th align="center" width="100px">书名：</th>
                                <td><input type="text" id="bookName"></td>
                            </tr>
                            <tr>
                                <th align="center">ISBN：</th>
                                <td><input type="text" id="ISBN"></td>
                            </tr>
                            <tr>
                                <th align="center">开本：</th>
                                <td>
                                    <input type="radio" name="size" value="12开" checked>12开&nbsp;
                                    <input type="radio" name="size" value="16开">16开&nbsp;
                                    <input type="radio" name="size" value="32开">32开&nbsp;
                                    <input type="radio" name="size" value="其他" onclick="xxx()">其他
                                    <span id="custom"></span>
                                </td>
                            </tr>
                            <tr>
                                <th align="center">作者：</th>
                                <td><input type="text" id="writer"></td>
                            </tr>
                            <tr>
                                <th align="center">出版社：</th>
                                <td><input type="text" id="press"></td>
                            </tr>
                            <tr>
                                <th align="center">出版日期：</th>
                                <td onclick="date()">
                                    <select id="addYear">
                                        <option value="1" selected>2022</option>
                                    </select> 年
                                    <select id="addMonth">
                                        <option value="1" selected>12</option>
                                    </select> 月
                                    <select id="addDay">
                                        <option value="1" selected>31</option>
                                    </select> 日
                            </tr>
                            <tr>
                                <th align="center">内容简介：</th>
                                <td>
                                    <textarea rows="5" cols="50" id="introduce"></textarea>
                                </td>
                            </tr>
                            <table align="center">
                                <tr>
                                    <td>
                                        <a style="text-decoration: none">
                                            <button type="button" onclick="add()">添加</button>
                                        </a>&nbsp;
                                        <button type="reset">重置</button>&nbsp;
                                        <a href="bookList.html" style="text-decoration: none">
                                            <button type="button">取消</button>&nbsp;
                                        </a>&nbsp;

                                    </td>
                                </tr>
                            </table>

                        </table>
                    </td>
                </tr>
            </table>
        </form>

    </div>
    <div class="footer"></div>

</div>
<script>
    let count = 0;


    function xxx() {
      
      
        let custom = document.getElementById("custom");
        custom.innerHTML = '<input type="text" id="custom_size"/>';
    }

    function date() {
      
      
        count++;
        if (count === 1) {
      
      
            let add_year = document.getElementById("addYear")
            let add_month = document.getElementById("addMonth")
            let add_day = document.getElementById("addDay")
            let year = '';
            let month = '';
            let day = '';
            for (let y = 2022; y >= 1800; y--) {
      
      
                year += '<option value="' + y + '" name="year">' + y + '</option>' + '\n';
            }
            for (let m = 12; m >= 1; m--) {
      
      
                month += '<option value="' + m + '" name="month">' + m + '</option>' + '\n';
            }
            for (let d = 31; d >= 1; d--) {
      
      
                day += '<option value="' + d + '" name="day">' + d + '</option>' + '\n';
            }
            add_year.innerHTML = year;
            add_month.innerHTML = month;
            add_day.innerHTML = day;
        }
    }

    function add() {
      
      
        let books = new Array(1);
        books[0] = document.getElementById("bookName").value;
        books[1] = document.getElementById("ISBN").value;
        // 开本
        let size = document.getElementsByName("size")
        for (let i = 0; i < 3; i++) {
      
      
            if (size[i].checked) {
      
      
                books[2] = size[i].value;
                break;
            }
            if (i === 2) {
      
      
                books[2] = document.getElementById("custom_size").value;
            }
        }
        books[3] = document.getElementById("writer").value;
        books[4] = document.getElementById("press").value;
        // 日期
        let year = document.getElementsByName("year");
        let month = document.getElementsByName("month");
        let day = document.getElementsByName("day");
        for (let j = 0; j < year.length; j++) {
      
      
            if (year[j].selected) {
      
      
                books[5] = year[j].value + "年";
            }
        }
        for (let k = 0; k < month.length; k++) {
      
      
            if (month[k].selected) {
      
      
                books[5] += month[k].value + "月";
            }
        }
        for (let l = 0; l < day.length; l++) {
      
      
            if (day[l].selected) {
      
      
                books[5] += day[l].value + "日";
            }
        }
        if (books[5] === undefined) {
      
      
            books[5] = '2022年12月31日';
        }
        books[6] = document.getElementById("introduce").value;

        let book = {
      
      
            name: books[0],
            ISBN: books[1],
            size: books[2],
            writer: books[3],
            press: books[4],
            date: books[5],
            introduce: books[6]
        }

        let bookList = JSON.parse(sessionStorage.getItem('bookList'));

        bookList.push(book);
        sessionStorage.setItem('bookList', JSON.stringify(bookList));

        location.href = "bookList.html"

    }
</script>


</body>
</html>

<!--<bookInformation.html>-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书详细信息</title>
</head>
<body>

<div style="width: 50%; margin: 0 auto;">
    <h1>《<span id="bookName"></span>》基本信息</h1>
    <hr>
    <p>图书名称：<span id="name"></span></p>
    <p>ISBN：<span id="ISBN"></span></p>
    <p>图书开本：<span id="size"></span></p>
    <p>作者：<span id="writer"></span></p>
    <p>出版社：<span id="press"></span></p>
    <p>出版日期：<span id="date"></span></p>

    <p>内容简介：<span id="introduce"></span></p>

    <br>
    <a href="bookList.html">返回</a>
</div>

<script>

    let num = sessionStorage.getItem('index')
    let h1 = document.getElementById('bookName');
    let name = document.getElementById('name');
    let ISBN = document.getElementById('ISBN');
    let size = document.getElementById('size');
    let writer = document.getElementById('writer');
    let press = document.getElementById('press');
    let date = document.getElementById('date');
    let introduce = document.getElementById('introduce');
    let list = JSON.parse(sessionStorage.getItem('bookList'));

    h1.textContent = list[num].name
   name.textContent = list[num].name
    ISBN.textContent = list[num].ISBN
    size.textContent = list[num].size
    writer.textContent = list[num].writer
    press.textContent = list[num].press
    date.textContent = list[num].date
    introduce.textContent = list[num].introduce



</script>

</body>
</html>


<!--<editBook.html>-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改图书信息</title>
    <style>
        body {
      
      
            margin: 0;
            padding: 0;
        }

        .all {
      
      
            margin: auto;
            width: 60%;
            height: 100%;
        }

        .left {
      
      
            width: 200px;
            height: 100vh;
            background-color: cornflowerblue;
            float: left;
        }

        .top {
      
      
            height: 60px;
            width: calc(100% - 200px);
            background-color: darkgray;
            float: right;
        }

        .content {
      
      
            width: calc(100% - 200px);
            height: calc(100vh - 60px - 40px);
            float: right;
        }

        .footer {
      
      
            height: 40px;
            width: calc(100% - 200px);
            background-color: darkgray;
            float: right;

        }

        .form {
      
      
            margin-top: 80px;
        }


    </style>
</head>
<body>
<div class="all">

    <div class="left"></div>
    <div class="top"></div>
    <div class="content">
        <form class="form">
            <table cellspacing="0" border="0" align="center" width="80%">
                <tr>
                    <td>填写图书入馆信息</td>
                </tr>
                <tr>
                    <td>
                        <table cellspacing="0" cellpadding="3" border="1" align="center" width="100%">
                            <tr>
                                <th align="center" width="100px">书名：</th>
                                <td><input type="text" id="bookName"></td>
                            </tr>
                            <tr>
                                <th align="center">ISBN：</th>
                                <td><input type="text" id="ISBN"></td>
                            </tr>
                            <tr>
                                <th align="center">开本：</th>
                                <td>
                                    <input type="radio" name="size" value="12开" checked>12开&nbsp;
                                    <input type="radio" name="size" value="16开">16开&nbsp;
                                    <input type="radio" name="size" value="32开">32开&nbsp;
                                    <input type="radio" name="size" value="其他" onclick="other()">其他
                                    <span id="custom"></span>
                                </td>
                            </tr>
                            <tr>
                                <th align="center">作者：</th>
                                <td><input type="text" id="writer"></td>
                            </tr>
                            <tr>
                                <th align="center">出版社：</th>
                                <td><input type="text" id="press"></td>
                            </tr>
                            <tr>
                                <th align="center">出版日期：</th>
                                <td>
                                    <select id="Year">
                                        <option id="addYear"></option>
                                    </select> 年
                                    <select id="Month">
                                        <option id="addMonth"></option>
                                    </select> 月
                                    <select id="Day">
                                        <option id="addDay"></option>
                                    </select> 日
                            </tr>
                            <tr>
                                <th align="center">内容简介：</th>
                                <td>
                                    <textarea rows="5" cols="50" id="introduce"></textarea>
                                </td>
                            </tr>
                            <table align="center">
                                <tr>
                                    <td>
                                        <a style="text-decoration: none">
                                            <button type="button" onclick="add()">保存</button>
                                        </a>&nbsp;
                                        <button type="reset">重置</button>&nbsp;
                                        <a href="bookList.html" style="text-decoration: none">
                                            <button type="button" onclick="cancel()">取消</button>&nbsp;
                                        </a>&nbsp;

                                    </td>
                                </tr>
                            </table>

                        </table>
                    </td>
                </tr>
            </table>
        </form>

    </div>
    <div class="footer"></div>

</div>
<script>

    let count = 0;


    let num = sessionStorage.getItem('index')
    let list = JSON.parse(sessionStorage.getItem('bookList'));
    document.getElementById('bookName').value = list[num].name;
    document.getElementById('ISBN').value = list[num].ISBN;
    // 开数设定
    let size = document.getElementsByName("size");
    for (let i = 0; i < size.length; i++) {
      
      
        if (list[num].size === size[i].value) {
      
      
            size[i].checked = true;
            break;
        }
    }
    document.getElementById('writer').value = list[num].writer;
    document.getElementById('press').value = list[num].press;
    mon = list[num].date.split("年")[1]
    da = mon.split("月")[1]

    document.getElementById('introduce').value = list[num].introduce;
    date();
    let year = document.getElementById("Year")
    let month = document.getElementById("Month")
    let day = document.getElementById("Day")
    for (let i = 0; i < year.options.length; i++) {
      
      
        if (year.options[i].value === list[num].date.split("年")[0]) {
      
      
            year.options[i].selected = true;
        }
    }
    for (let j = 0; j < month.options.length; j++) {
      
      
        if (month.options[j].value === mon.split("月")[0]) {
      
      
            month.options[j].selected = true;
        }
    }
    for (let k = 0; k < day.options.length; k++) {
      
      
        if (day.options[k].value === da.split("日")[0]) {
      
      
            day.options[k].selected = true;
        }
    }


    function other() {
      
      
        let custom = document.getElementById("custom");
        custom.innerHTML = '<input type="text" id="custom_size"/>';
    }

    function date() {
      
      
        count++;
        if (count === 1) {
      
      
            let add_year = document.getElementById("Year")
            let add_month = document.getElementById("Month")
            let add_day = document.getElementById("Day")
            let year = '';
            let month = '';
            let day = '';
            for (let y = 2022; y >= 1800; y--) {
      
      
                year += '<option value="' + y + '" name="year">' + y + '</option>' + '\n';
            }
            for (let m = 12; m >= 1; m--) {
      
      
                month += '<option value="' + m + '" name="month">' + m + '</option>' + '\n';
            }
            for (let d = 31; d >= 1; d--) {
      
      
                day += '<option value="' + d + '" name="day">' + d + '</option>' + '\n';
            }
            add_year.innerHTML = year;
            add_month.innerHTML = month;
            add_day.innerHTML = day;
        }
    }

    function add() {
      
      
        let bookList = JSON.parse(sessionStorage.getItem('bookList'));
        let books = new Array(1);
        books[0] = document.getElementById("bookName").value;
        books[1] = document.getElementById("ISBN").value;
        // 开本
        let size = document.getElementsByName("size")
        for (let i = 0; i < 3; i++) {
      
      
            if (size[i].checked) {
      
      
                books[2] = size[i].value;
                break;
            }
            if (i === 2) {
      
      
                books[2] = document.getElementById("custom_size").value;
            }
        }
        books[3] = document.getElementById("writer").value;
        books[4] = document.getElementById("press").value;
        // 日期
        let year = document.getElementById("Year")
        let month = document.getElementById("Month");
        let day = document.getElementById("Day");
        for (let j = 0; j < year.options.length; j++) {
      
      
            if (year[j].selected) {
      
      
                books[5] = year[j].textContent + "年";
            }
        }
        for (let k = 0; k < month.options.length; k++) {
      
      
            if (month[k].selected) {
      
      
                books[5] += month[k].textContent + "月";
            }
        }
        for (let l = 0; l < day.options.length; l++) {
      
      
            if (day[l].selected) {
      
      
                books[5] += day[l].textContent + "日";
            }
        }

        if (books[5] === undefined) {
      
      
            books[5] = '2022年12月31日';
        }
        books[6] = document.getElementById("introduce").value;

        let book = {
      
      
            name: books[0],
            ISBN: books[1],
            size: books[2],
            writer: books[3],
            press: books[4],
            date: books[5],
            introduce: books[6]
        }

        //修改数组中的图书
        bookList.splice(num, 1, book);

        //保存进sessionStorage
        sessionStorage.setItem('bookList', JSON.stringify(bookList))

        location.href = "bookList.html";

    }
    function cancel() {
      
      
        location.href = 'bookList.html';
    }


</script>


</body>
</html>

Guess you like

Origin blog.csdn.net/qq_38173572/article/details/128131110
Recommended
Ranking
ElasticSearch-- data modeling best practices
Permission Maintenance - Shadow User Backdoor
Refactor the code using MVP mode
Quantitative investment-fundamental model-PVC multi-factor model
Spark Big Data Processing Lecture Notes 3.2 Mastering RDD Operators
Blazor page components (2)
Erlernen von Kenntnissen zur Android-Entwicklung – Kodierung, Verschlüsselung, Hash, Serialisierung und Zeichensätze
About Qi high in JAVA study notes SORM summary detailed personal explanation
Will you calculate the accuracy of the rope displacement sensor in the measurement?
OPENJTAG debugging learning (3): debugging using the gdb command line
Daily
More
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)
2024-04-23(30)
2024-04-22(5)

Code World

© 2018 codetd.com