동적으로 생성 된 버튼 저장

다음은 제 코드입니다. 이 경우 Add Group을 클릭하면 버튼이 동적으로 생성되어 fooBar에 추가됩니다. 하지만 페이지를 새로 고칠 때 사라집니다. 단추를 만들고 fooBar에 저장하고 싶습니다.동적으로 생성 된 버튼 저장

1) 정보 서버 측 저장 : : 버튼을 생성 한 후, 서버에 AJAX 전화 걸기가 어떻게 든 구성을 저장하고 그에 따라 전달 된 HTML을 변경

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

기본적으로 두 가지 옵션이 있습니다 다음 번에이 문서를 요청할 때

2) 버튼 구성 클라이언트 측을 저장합니다. 예 : 예 : very simple via localStorage 페이지에 체크를 통합하여 잠재적으로 생성 된 버튼에 대해 LS를 확인하십시오.

출처

2014-02-06 10:15:58 Christoph

또는 쿠키를 직렬화하여 쿠키에 저장하십시오 (이전 브라우저에서도 작동 함). –

@musically_ut이 클라이언트 측 스토리지를 고려할 것입니다. 쿠키의 단점은 각 요청마다 잠재적으로 오버 헤드가 많은 데이터를 전송한다는 것입니다. – Christoph

동적으로 생성 된 버튼 저장

답변

관련 문제