保存動態創建的按鈕

以下是我的代碼。在這個通過點擊添加組中，動態創建一個按鈕並添加到fooBar中。但是當我刷新頁面時，它就消失了。我想創建按鈕並將其保存在fooBar中。保存動態創建的按鈕

<!DOCTYPE html> 
<!-- 
To change this license header, choose License Headers in Project Properties. 
To change this template file, choose Tools | Templates 
and open the template in the editor. 
--> 
<html> 
    <head> 
     <title>Content</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <!-- Bootstrap --> 
     <link href="stylesheets/bootstrap.min.css" rel="stylesheet"> 
     <link href="stylesheets/bootstrap.css" rel="stylesheet"> 
     <link href="stylesheets/bootstrap-theme.min.css" rel="stylesheet"> 
     <link href="stylesheets/bootstrap-theme.css" rel="stylesheet"> 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
     <!--[if lt IE 9]> 
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
     <![endif]--> 
     <SCRIPT language="javascript"> 
      window.onload = function() { 

       document.getElementById('btnAdd').onclick = function() 
       { 
        myFunction(); 

       }; 
       var person; 
       var element; 
       function myFunction() 
       { 
        var x; 

        person = prompt("Please enter Group Name"); 

        if (person != null) 
        { 
         add(element); 
//       x = "Hello " + person + "! How are you today?"; 
//       document.getElementById("demo").innerHTML = x; 
        } 
       } 

       function add(type) { 
        //Create an input type dynamically. 
        element = document.createElement("button"); 

        var t = document.createTextNode(person); 
        element.appendChild(t); 
        //Assign different attributes to the element. 
//     element.type = type; 
//     element.value = type; // Really? You want the default value to be the type string? 
//     element.name = type; // And the name too? 
        element.className = "btn btn-default"; 
        span.innerHTML=person; 
        element.onclick = function() { // Note this is a function 
         //alert("Do it again!"); 
         $("#btn-group").load("head.html"); 

        }; 

        var foo = document.getElementById("fooBar"); 


        //Append the element in page (in span). 
        foo.appendChild(element); 

//     var d = document.getElementById('fooBar'); 
//     d.appendChild(i); 
       } 



      }; 
//   function copy() 
//    { 
//     var n1 = document.getElementById('addKeyword'); 
//     var n2 = document.getElementById('getKeyword'); 
//     n2.innerText = n1.value; 
//    } 
     </SCRIPT> 
     <script> 
    $(function(){ 
     $("#btn-group").load("head.html"); 
    }); 
    </script> 
    </head> 
    <body> 
     <div class="btn-group" id="fooBar"> 
<!--      <button type="button" class="btn btn-default">Marketing</button> 
         <button type="button" class="btn btn-default">Internet</button> 
         <button type="button" class="btn btn-default">Politics</button>--> 
      <button type="button" class="btn btn-default" id="btnAdd">Add Group</button> 
     </div> 
     <div class="boxed"> 
      <h4>Group:<span class="label label-default" id="span"></span> 
       <button type="submit" class="btn btn-default">Edit Name</button> 
       <button type="submit" class="btn btn-default">Disable</button> 
       <button type="submit" class="btn btn-default">Delete Group</button></h4> 
      <div class="row"> 
       <div class="col-lg-6"> 
        <div class="input-group"> 
         <input type="text" class="form-control" placeholder="Enter your keyword" id="addKeyword"> 
         <span class="input-group-btn"> 
          <button class="btn btn-default" type="button" >Add</button> 
         </span> 
        </div><!-- /input-group --> 
       </div><!-- /.col-lg-6 --> 
      </div> 
      <h4>Keywords:</h4> 
<!--   <div class="keyword" id="getKeyword"></div>--> 
     </div> 

     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
     <script src="https://code.jquery.com/jquery.js"></script> 
     <!-- Include all compiled plugins (below), or include individual files as needed --> 
     <script src="stylesheets/bootstrap.min.js"></script> 
     <script src="stylesheets/bootstrap.js"></script> 
    </body> 
</html>

來源

2014-02-06 upjc

基本上，你有兩個選擇：

1）將信息保存到服務器端：創建一個按鈕後，使一個AJAX調用服務器，保存配置有莫名其妙，並相應地改變傳遞的HTML下一次請求這個文件

2）保存按鈕配置客戶端：例如very simple via localStorage並將支票集成到您的頁面中，以檢查可能創建的按鈕的LS。

來源

2014-02-06 10:15:58 Christoph

或序列化並將其存儲在cookie中（也適用於舊版瀏覽器）。 –

@musically_ut我會考慮這個客戶端存儲。 Cookie的不利之處在於，您可能會在每次請求中傳輸數據，這可能會造成很大的開銷。 – Christoph

保存動態創建的按鈕

回答

相關問題