추가 된 요소를 localStorage에 저장

Question

나는 교사이며 수업 계획을 구성하는 페이지를 만듭니다. 새로운 수업 (li)과 새로운 주 (ul)를 추가 할 수 있어야합니다. 수업은 각 주간에 정렬이 가능합니다. 새로 추가 된 각 항목은 localStorage에 저장됩니다.

지금까지 수업 및 새 주를 만들 수있었습니다. sortable 함수가 작동합니다. save 함수는 새로운 주 (ul)를 저장하지 않는다는 것을 제외하고는 작동합니다. 새로 고침 할 때, 새로운 수업 (li)은 여전히 ​​페이지에 있지만 새로운 주 (ul)는 사라졌습니다.

$("#saveAll").click(function(e) { 
    e.preventDefault(); 
    var listContents = []; 
    $("ul").each(function(){ 
     listContents.push(this.innerHTML); 
    }) 
    localStorage.setItem('todoList', JSON.stringify(listContents)); 
    }); 

    $("#clearAll").click(function(e) { 
    e.preventDefault(); 
    localStorage.clear(); 
    location.reload(); 
    }); 

    loadToDo(); 

    function loadToDo() { 
    if (localStorage.getItem('todoList')){ 
     var listContents = JSON.parse(localStorage.getItem('todoList')); 
     $("ul").each(function(i){ 
      this.innerHTML = listContents [i]; 
     }) 
    } 
    } 

나는 fiddle here을 만들었습니다.

"새 주 추가"단추를 클릭 한 다음 "단원 만들기"단추를 클릭하고 새 단원을 주 중 하나로 끌어다 놓을 수 있습니다. "모두 저장"을 클릭하면 첫 번째 주만 저장됩니다.

나는 무엇이 빠져 있는지 알 수 없다.

Answer 1

제대로 저장되지만 페이지에 처음으로 <ul> 요소가 하나만 있기 때문에 페이지가 loadToDo()으로 채워집니다. (listContents에는 하나 이상의 요소가 있지만 $("ul").each(...)은 하나의 요소에 대해서만 반복됩니다.)

이 문제를 해결하는 데 사용할 수있는 빠른 반창고가 있습니다. 당신은 저장 영역에서 배열을 가져 후

function addNewWeek() { 
    var x = '<ul class="sortable weeklist"></ul>'; 
    $(x).appendTo('.term').sortable({connectWith: '.sortable'}); 
} 

$('#new-week-but').click(addNewWeek); 

다음이 블록을 추가 있지만 <ul> 요소를 열거하기 전에 :

var i; 
for (i = 2; i < listContents.length; ++i) { 
    addNewWeek(); 
} 

이 필요한 수를 추가합니다 명명 된 기능으로 #new-week-but 클릭 핸들러를 리팩토링 <ul> 요소를 채 웁니다.

i을 두 개로 초기화하는 이유는 listContents에 요소 수가 2 개 더 적기 때문입니다. 페이지가로드 될 때 에 <ul>이 있고, <ul id="new-lesson-list"> 내용도 listContents에 저장되므로 1을 빼야합니다. (당신의 #saveAll 클릭 핸들러에서 해당 요소를 필터링 고려하십시오.)

(이 addNewWeek()이 코드의 나머지 부분을 볼 수 있도록하는 것이 하나 개의 큰 기능으로 $(document).ready() 모든 기능을 통합이 필요합니다.)

---

그들은 다른 임의 <ul> 요소를 구별 할 수 있도록

1. 각 편집 <ul> CSS 클래스 보내기

   제안 코드의 유지 보수성을 향상시키기 위해 그 페이지. "템플릿"<ul>도 저장되지 않도록 데이터를 저장할 때이 클래스를 필터링하십시오.

2. 페이지에서 기본 편집 가능한 <ul>을 제거하십시오. 대신 loadToDo() 함수에서 else 블록을 if 블록에 추가하고 else 블록에서 addNewWeek()을 호출하십시오. 또한 listContents.length == 0 인 경우 전화하십시오. 이렇게하면 HTML 소스에서 요소가 복제되지 않습니다 (중복은 좋지 않습니다!) 그리고 당신의로드 논리에서 그것을 설명해야만합니다. 당신은이 두 가지를 구현하는 경우

당신은 훨씬 덜 생긴 이상한 (미래 테이너를 여행 가능성이 적습니다) 내 샘플 코드에 i 0 대신 2를 초기화 할 수 있습니다.