배열로 테이블의 로컬 스토리지

안녕하세요 도와 줘서 고맙습니다! 약간의 배경으로 필자는 (필자의 질문에 의해 분명히 알 수 있듯이)이 분야에 상당히 익숙하며 현재 회사의 부서로 옮기기 위해 교육을 받고 있습니다. 그들이 제공 한 첫 번째 교육 프로젝트는 이름/번호를 입력하고 목록에 추가하고 목록에서 행을 삭제 한 다음 목록을 로컬 저장소에 저장할 수있는 단일 페이지 전화 번호부 응용 프로그램을 만드는 것입니다. 다른 규칙은 모든 HTML/CSS/Javascript가 하나의 파일에 포함되어야한다는 것입니다 (여러 파일로 여러 부분을 나누는 것이 좋은 아이디어라고 가르쳐주는 것으로 가정합니다).배열로 테이블의 로컬 스토리지

이제는 기존 테이블에 새 행으로 추가 한 전화 번호부 항목을 만들 수 있지만 로컬 저장소로 가져올 수없는 문제가 있습니다. 이것은 어떤 종류의 저장 장치에 대한 나의 첫 번째 모험이었습니다. 그래서 나는 고심하고 있으며, 다음으로 가야 할 곳이나 내가 잘못하고있는 것에 대해 약간의 지침을 원합니다. 저장소가 설정 한 후 로컬 스토리지에 항목을 추가 할 수

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 

<head> 
<title>Phonebook 1.0</title> 

<style> 
#welcome { 
     background-color: #0000DD; 
     border-radius: 5px; 
     height: 50px; 
} 

#welcomeText { 
     position: relative; 
     left: 10px; 
     top: 32%; 
     color: white; 
     font-family: Georgia, Verdana; 
} 

.header { 
     font-family: Georgia, Verdana; 
     font-size: 18px; 

} 

h1 { 
     font-family: Georgia, Verdana; 
} 

#deleteRow { 
     background-color: transparent; 
     text-decoration: underline; 
     border: none; 
     color: blue; 
     cursor: pointer; 
} 



</style> 

<script type="text/javascript"> 

    function contact (name, home, work, cell) { 
     this.name = name; 
     this.home = home; 
     this.work = work; 
     this.cell = cell; 
    } 

    var store = []; 
    localStorage["store"] = JSON.stringify(store); 

    function addRow() { 

     var newContact = new contact(document.getElementById("name").value, document.getElementById("home").value, 
           document.getElementById("work").value, document.getElementById("cell").value); 

     var table = document.getElementById("input"); 
     var row = table.insertRow(document.getElementById("input").rows.length); 
     var cell1 = row.insertCell(0); 
     var cell2 = row.insertCell(1); 
     var cell3 = row.insertCell(2); 
     var cell4 = row.insertCell(3); 
     var cell5 = row.insertCell(4); 

     cell1.innerHTML = newContact.name; 
     cell2.innerHTML = newContact.home; 
     cell3.innerHTML = newContact.work; 
     cell4.innerHTML = newContact.cell; 
     cell5.innerHTML = "<button id='deleteRow'>Delete</button>" 

     for (i = 2; i < document.getElementById("input").rows.length; i++) { 
      store.push(table[i]); 
     }; 

     console.log(storedData); 
     console.log(store); 
    } 

    var storedData = JSON.parse(localStorage["names"]); 



</script>  
</head> 

<body> 

<h1>Phonebook Beta 1.7</h1> 

<div id="welcome"> 
    <b id="welcomeText">Welcome to my single-page phone book application.</b> 
</div> 

<table id="input"> 
    <tr> 
     <th class="header"><b>Name</b></th> 
     <th class="header"><b>Home</b></th> 
     <th class="header"><b>Work</b></th> 
     <th class="header"><b>Cell</b></th> 
    </tr> 
    <tr> 
     <td><input id="name" type="text" name="name"></form></td> 
     <td><input id="home" type="text" name="home"></form></td> 
     <td><input id="work" type="text" name="work"></form></td> 
     <td><input id="cell" type="text" name="cell"></form></td> 
     <td><button onclick="addRow()">Add</button></td> 
    </tr> 
</table> 

</body> 
</html>

출처

2014-12-02 TheTurbobeef

적절한 방법은

localStorage.setItem("store",JSON.stringify(store));

http://www.w3schools.com/html/html5_webstorage.asp

될 것이다. 현재 지금하고 있습니다 localStorage [ "store"] = JSON.stringify (store);

a) 올바르지 않고 b) 널 또는 빈 배열을 저장합니다.

는

for (i = 2; i < document.getElementById("input").rows.length; i++) { 
     store.push(table[i]); 
    }; 
localStorage.setItem("store",JSON.stringify(store));

출처

2014-12-02 18:58:06

아 괜찮이 말이보십시오. 로컬 스토리지 배열을 만드는 것처럼 보이지만 값은 모두 null입니다. 가치를 저장하는 것을 어떻게 알 수 있습니까? – TheTurbobeef

상점 출력은 무엇입니까? –

배열로 테이블의 로컬 스토리지

답변

관련 문제