背景色をlocalStorageに保存するにはどうすればよいですか？

Question

localstorageに保存する予定リストがあり、背景色を赤に変更するPriorityボタンがあります。その色は、リフレッシュまたは新しいToDoアイテムの追加には保存されません。 localStorageに色を保存することは可能ですか？ https://jsfiddle.net/kiddigit/hg6w01zn/

function priority() { 
    var id = this.getAttribute('value'); 
    var todos = get_todos(); 

    localStorage.setItem('todo', JSON.stringify(todos)); 
    document.getElementById(id).style.background = "red"; 

    return false; 
} 

Answer 1

アイテムと背景色を保存したい場合は、オブジェクトだけではなく名前としてアイテムを保存する必要があるとしています。

私はあなたのaddメソッドを次のようにロジックを追加することをお勧めします

：

function add() { 
    var task = document.getElementById('task').value; 
    var todos = get_todos(); 
    var newTask = { 
       name:task, 
       id: "item" + todos.length, 
       priority: { 
          isPriority:false, 
          color:"" 
          } 
      }; 

    todos.push(newTask); 
    localStorage.setItem('todo', JSON.stringify(todos)); 

    show(); 

    return false; 
} 

その後、あなたはそれらの（）を表示するとき、あなたのループは次のようになります。

for (var i = 0; i < todos.length; i++) { 
     var todo = todos[i]; 
     html += "<p id='item" + i + "' isPriority='" + 
     todo.priority.isPriority + "'>" + todo["name"] + '<p>' + 
     "<button class='remove'>Delete</button>" + " " + 
     "<button class='priority' value='item" + i + "'>Priority</button>"; 
    }; 

次にあなたが設定したときオブジェクトの優先順位は、あなただけの

todos[i].priority.isPriority = true; 

と

を設定しています

todos[i].priority.color = "red"; 

あなたがプロパティに基づいて、あなたの色を定義したい場合は、あなただけのisPriority = trueとHTMLでプロパティを設定することができ、その後、CSSでこれを行う：

[isPriority="true"] { 
    background-color: red; 
} 

は、この例をチェックアウト： https://jsfiddle.net/1Lgrb7c8/2/