stackoom
  简体   繁体   中英

How can I pass data like list group from one html page to another using JavaScript?

 原文  2017-04-18 13:06:35  7   2    javascript/ jquery/ html

Question

This is my first HTML page: 

 <!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>

This is my second HTML page: 

 <!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">&times;</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">&times;</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>

When SaveCategory button is clicked, the category name and the listgroup should be sent and displayed in the second html page. Please suggest me what code I should use for this.

2 answers

solution1
 0 ACCPTED  2017-04-18 13:10:59

您需要服务器端编码才能将数据从一页发送到另一页

solution2
 0  2017-04-18 13:27:16

JavaScript is run in the client browser, so for these purposes is more suitable to use server-side technology, for example PHP, but anyway you can do this via JavaScript too with LocalStorage. You can save the data at the one page and then request it on another page with this code: 

localStorage.setItem('your_variable', 'test'); //save
localStorage.getItem('your_variable') //request

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can i pass data from one HTML page to another using JavaScript How do I pass form data from one HTML page to another HTML page using ONLY javascript? How can I pass values from one html page to another html page using javascript How can I pass a value from one HTML page to another using JavaScript? How can I pass data from one page to another using PHP and Javascript? How to pass the data from one html to another html page using JavaScript in Phonegap? How can I pass data from one page to another in PHP and Javascript without from? how to transfer data from one html page to another using javascript How to pass data from one HTML page to another HTML page using JQuery? How to pass data from one page to another page html
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM