[英]How can I pass data like list group from one html page to another using JavaScript?
这是我的第一个HTML页面：
<!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> <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> <script type="text/javascript" src="js/newCategory.js"></script> <input type="text" class="form-control" placeholder="Category name" id="categoryName"> <div class="col-sm-3"> <div class="card" id="cardId"> <div class="card-block"> <div class="input-group"> <input type="text" class="form-control" placeholder="Enter item" id="name1"> <span class="input-group-btn"> <button type="button" class="btn btn-success btn-number" onclick="addRow(1)" data-type="plus" data-field="quant[2]"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <ul class="list-group" id="mylistgroup1"> <li id="li1" class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> <button type="button" class="btn btn-primary" onclick="saveCategory()">save category</button> </div> </div> </div> </head> <body> </body> </html>
这是我的第二个HTML页面：
<!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> <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> <script type="text/javascript" src="js/edit.js"></script> <h3>Minimum 2 categories and minimum 20 items in order to publish the 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="addNewCategory()">Add category</button> <br class="container"> <div class="row"> <div class="col-sm-3"> <div class="card"> <div class="card-block" id="card1"> <button type="button" class="close" aria-label="Close" onclick="removeCategory(1)"> <span aria-hidden="true">×</span> </button> <h4 class="card-title">Friends</h4> <div class="input-group"> <input type="text" class="form-control" placeholder="Enter item" id="name1"> <span class="input-group-btn"> <button type="button" class="btn btn-success btn-number" onclick="addRow(1)" data-type="plus" data-field="quant[2]"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <ul class="list-group" id="mylistgroup1" > <button class="list-group-item list-group-item-action"">Cras justo odio</button> <button class="list-group-item list-group-item-action">Dapibus ac facilisis in</button> <button class="list-group-item list-group-item-action">Morbi leo risus</button> <button class="list-group-item list-group-item-action">Porta ac consectetur ac</button> <button class="list-group-item list-group-item-action">Vestibulum at eros</button> </ul> <button type="button" class="btn btn-primary" onclick="deleteRow(1)">delete</button> </div> </div> </div> <div class="col-sm-3"> <div class="card"> <!--Card content--> <div class="card-block" id="card2"> <button type="button" class="close" aria-label="Close" onclick="removeCategory(2)"> <span aria-hidden="true">×</span> </button> <!--Title--> <h4 class="card-title">Seinfeld</h4> <!--Text--> <div class="input-group"> <input type="text" class="form-control" placeholder="Enter item" id="name2"> <span class="input-group-btn"> <button type="button" class="btn btn-success btn-number" onclick="addRow(2)" data-type="plus" data-field="quant[2]"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <ul class="list-group" id="mylistgroup2"> <button class="list-group-item list-group-item-action">Cras justo odio</button> <button class="list-group-item list-group-item-action">Dapibus ac facilisis in</button> <button class="list-group-item list-group-item-action">Morbi leo risus</button> <button class="list-group-item list-group-item-action">Porta ac consectetur ac</button> <button class="list-group-item list-group-item-action">Vestibulum at eros</button> </ul> <button type="button" class="btn btn-primary" onclick="deleteRow(2)">delete</button> </div> <!--/.Card content--> </div> <!--/.Card--> </div> </div> <!-- row --> <div><br> <br> </div> <button type="button" class="btn btn-primary" onclick="saveGame()">save</button> <button type="button" class="btn btn-primary" onclick="back()">back</button> </div> <!-- container --> </head> <body> </body> </html>
单击SaveCategory按钮时，类别名称和列表组应发送并显示在第二个html页面中。 请建议我应该为此使用什么代码。
您需要服务器端编码才能将数据从一页发送到另一页
JavaScript在客户端浏览器中运行，因此出于这些目的，更适合使用服务器端技术（例如PHP），但是无论如何，您也可以通过JavaScript与LocalStorage一起使用。 您可以使用以下代码将数据保存在一页上，然后在另一页上请求：
localStorage.setItem('your_variable', 'test'); //save
localStorage.getItem('your_variable') //request
如何使用 JavaScript 将数据从一个 HTML 页面传递到另一个页面
[英]How can i pass data from one HTML page to another using JavaScript
如何仅使用JavaScript将表单数据从一个HTML页面传递到另一HTML页面？
[英]How do I pass form data from one HTML page to another HTML page using ONLY javascript?
如何使用javascript将值从一个html页面传递到另一个html页面
[英]How can I pass values from one html page to another html page using javascript
如何使用JavaScript将值从一个HTML页面传递到另一个HTML页面？
[英]How can I pass a value from one HTML page to another using JavaScript?
如何使用PHP和Javascript将数据从一页传递到另一页？
[英]How can I pass data from one page to another using PHP and Javascript?
如何使用Phonegap中的JavaScript将数据从一个html传递到另一个html页面？
[英]How to pass the data from one html to another html page using JavaScript in Phonegap?
如何在没有PHP的情况下用PHP和Javascript将数据从一页传递到另一页？
[英]How can I pass data from one page to another in PHP and Javascript without from?
如何使用javascript将数据从一个html页面传输到另一页面
[英]how to transfer data from one html page to another using javascript
如何使用JQuery将数据从一个HTML页面传递到另一HTML页面？
[英]How to pass data from one HTML page to another HTML page using JQuery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.