Question

我有一个html页面createGame.html，其中我在表格中添加了一行，然后移到另一页面。

然后再次打开createGame.html，我输入的行不会出现。

请建议我使用哪些代码。

感谢您的帮助。

createGame.html：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="createGame.html">Home</a></li>
                <li><a href="Edit.html">Edit</a></li>
                <li><a href="generalSettings.html">General Settings</a></li>
                <li><a href="main.html">Start game</a></li>
            </ul>
        </div>
    </nav>

    <h3>Create a new game <span class="label label-default"></span></h3>

    <input type="text" class="form-control"  placeholder="Enter game's name"  name="fname" id="fname">
    <button type="button" class="btn btn-primary" onclick="addRow()">Add</button>



    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>The game was published</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

    <div class="table-responsive">


        <table id="mytable" class="table table-bordred table-striped">

            <thead>

            <th><input type="checkbox" id="checkall" /></th>
            <th>Game's name</th>
            <th>Code</th>
            <th>Settings</th>
            <th>Edit</th>
            <th>Publish</th>
            <th>Delete</th>
            </thead>
            <tbody>
            <tr>
                <td><input type="checkbox" class="checkthis" /></td>
                <td>Mohsin</td>
                <td>12</td>
                <td><input type="image" onclick="changePage('generalSettings')" src="assets/settings.png" /></td>
                <td><p data-placement="top" data-toggle="tooltip" title="Edit" onclick="changePage('Edit')"><button class="btn btn-primary btn-xs" data-title="Edit"  ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
                <td><input type="image" src="assets/publish.png" data-toggle="modal" data-target="#myModal"/></td>

                <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"  onclick="deleteRow(1)"><span class="glyphicon glyphicon-trash"></span></button></p></td>
            </tr>

            <tr>
                <td><input type="checkbox" class="checkthis" /></td>
                <td>Mohsin</td>
                <td>12</td>
                <td><input type="image" onclick="changePage('generalSettings')" src="assets/settings.png" /></td>
                <td><p data-placement="top" data-toggle="tooltip" title="Edit" onclick="changePage('Edit')"><button class="btn btn-primary btn-xs" data-title="Edit"  ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
                <td><input type="image" src="assets/publish.png" data-toggle="modal" data-target="#myModal"/></td>

                <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"  onclick="deleteRow(2)"><span class="glyphicon glyphicon-trash"></span></button></p></td>
            </tr>


            <tr>
                <td><input type="checkbox" class="checkthis" /></td>
                <td>Mohsin</td>
                <td>12</td>
                <td><input type="image" onclick="changePage('generalSettings')" src="assets/settings.png" /></td>
                <td><p data-placement="top" data-toggle="tooltip" title="Edit" onclick="changePage('Edit')"><button class="btn btn-primary btn-xs" data-title="Edit"  ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
                <td><input type="image" src="assets/publish.png" data-toggle="modal" data-target="#myModal"/></td>

                <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"  onclick="deleteRow(3)"><span class="glyphicon glyphicon-trash"></span></button></p></td>
            </tr>



            <tr>
                <td><input type="checkbox" class="checkthis" /></td>
                <td>Mohsin</td>
                <td>12</td>
                <td><input type="image" onclick="changePage('generalSettings')" src="assets/settings.png" /></td>
                <td><p data-placement="top" data-toggle="tooltip" title="Edit" onclick="changePage('Edit')"><button class="btn btn-primary btn-xs" data-title="Edit"  ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
                <td><input type="image" src="assets/publish.png" data-toggle="modal" data-target="#myModal"/></td>

                <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"  onclick="deleteRow(4)"><span class="glyphicon glyphicon-trash"></span></button></p></td>
            </tr>


            <tr>
                <td><input type="checkbox" class="checkthis" /></td>
                <td>Mohsin</td>
                <td>12</td>
                <td><input type="image" onclick="changePage('generalSettings')" src="assets/settings.png" /></td>
                <td><p data-placement="top" data-toggle="tooltip" title="Edit" onclick="changePage('Edit')"><button class="btn btn-primary btn-xs" data-title="Edit"  ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
                <td><input type="image" src="assets/publish.png" data-toggle="modal" data-target="#myModal"/></td>

                <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete"  onclick="deleteRow(5)"><span class="glyphicon glyphicon-trash"></span></button></p></td>
            </tr>



            </tbody>

        </table>

        <div class="clearfix"></div>
        <ul class="pagination pull-right">
            <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
        </ul>

    </div>

    </div>
    </div>
    </div>


    <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                    <h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <input class="form-control " type="text" placeholder="Mohsin">
                    </div>
                    <div class="form-group">

                        <input class="form-control " type="text" placeholder="Irshad">
                    </div>
                    <div class="form-group">
                        <textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>


                    </div>
                </div>
                <div class="modal-footer ">
                    <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>



    <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
                    <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
                </div>
                <div class="modal-body">

                    <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>

                </div>
                <div class="modal-footer ">
                    <button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <button type="button" class="btn btn-primary" onclick="deleteRow()">Delete</button>

    <script type="text/javascript" src="js/createGame.js"></script>
</head>
<body>

</body>
</html>

＆＃13;

Answer 1

您需要做的就是在存储中备份数据。

根据您的要求，您可以决定要使用的存储类型。

如果是出于临时目的，那只是在浏览器关闭之前，然后使用任何local storage类似的会话存储。

如果您想保留这些数据以供日后使用，请使用data base

如何保存html页面的状态？

1 个答案: