Question

我正在为自己开发清单chrome应用程序，希望能为您提供帮助。基本上，我不知道如何保存复选框状态。如果我选中一个框并刷新页面，我希望它保持选中状态。但是我似乎无法编写代码。任何想法如何做到这一点？谢谢！！

编辑：我添加了html，它告诉我我的帖子主要是代码，我需要添加一些文本，因此在这里我只写一些内容来满足此要求。无需阅读此书。感谢您的帮助，对于后期的修改很抱歉

function get_todos() {
    var todos = new Array;
    var todos_str = localStorage.getItem('todo');
    if (todos_str !== null) {
        todos = JSON.parse(todos_str); 
    }
    return todos;
}
 
function add() {
    var task = document.getElementById('task').value;
 

    var todos = get_todos();
	
    todos.push(task);
    localStorage.setItem('todo', JSON.stringify(todos));
 
    show();
 
    return false;
}
 
function remove() {
    var id = this.getAttribute('id');
    var todos = get_todos();
    todos.splice(id, 1);
    localStorage.setItem('todo', JSON.stringify(todos));
 
    show();
 
    return false;
}
 
function show() {
    var todos = get_todos();
 
    var html = '<ul>';
    for(var i=0; i<todos.length; i++) {
        html += '<li>' + '<input type="checkbox" id="checkbox">' + todos[i] + '<button class="remove" id="' + i  + '">delete</button></li>' ;
    
	
	};
    html += '</ul>';
	
 
    document.getElementById('todos').innerHTML = html;
	
	
	
	
    var buttons = document.getElementsByClassName('remove');
    for (var i=0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', remove);
    };
}



document.getElementById('add').addEventListener('click', add);
show();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>


<style>
html,body,h1,h3,h4,h6 {font-family: "Roboto";font-size: 24px; sans-serif}
h2 {font-family: "Roboto";font-size: 36px; sans-serif}
h5 {font-family: "Roboto";font-size: 28px; sans-serif}
</style>



<input id="task"><button id="add">Add</button>
<hr>
<div id="todos"></div>


<script src="todo.js"></script>


   
</body>
</html>

Answer 1

看到没有其他人提供了答案，我以为我会提出潜在的解决方案，我选择了一种功能样式，因为为什么不这样呢？它很简单，易于阅读，等等...

PS

我包括了fallback变量，因为在Stack Overflow上，您在运行代码段时无法访问本地存储。

Access-Control-Allow-Origin: *

let fallback = [];
const $e = query => document.querySelector(query);


// Return a todo list.
const getToDoList = () => {
  let data = null;
  
  try {
    data = JSON.parse(localStorage.getItem('todo'));
  } catch (e) {
    data = fallback;
  }
  
  return data == null || Array.isArray(data) == false ? [] : data;
};


// Set the todo list.
const setToDoList = (data) => {
  try {
    localStorage.setItem('todo', JSON.stringify(data));
  } catch (e) {
    fallback = data;
  }
};


// Add a task to the todo list.
const addToDo = () => { 
  const array = getToDoList();
  array.push({value: $e("#task").value, checked: false});
  setToDoList(array);
}; 


// Remove a task from the todo list.
const removeToDo = index => {
  const array = getToDoList();
  array.splice(index, 1);
  setToDoList(array);
};


// Allow for the ability to remove an item from the todo list & other stuff..
const dispatchListEvents = () => {
  document.querySelectorAll('#app ul li span').forEach(span => {
    span.onclick = () =>  {
      removeToDo(span.parentElement.getAttribute('data-index'));
      render();
    }
  });
  
  document.querySelectorAll('#app ul li input').forEach(input => {
    input.onclick = () =>  {
      const array = getToDoList();
      const object = array[input.parentElement.getAttribute('data-index')];
      object.checked = ! object.checked;
      setToDoList(array);
      render();
    }
  });
};


// Render the todo list.
const render = () => {
  let index = 0;
  const template = item => `<li data-index="${index++}">` +
      `<input type="checkbox" ${item.checked ? 'checked' : ''} />` +
      `${item.value} <span>X</span></li>`;
  
  const re = new RegExp('</li>,', 'g'), replacement = '</li>';
  const html = `<ul>${getToDoList().map(i => template(i))}</ul>`;
  $e("#app").innerHTML = `${html.replace(re, replacement)}`;
  dispatchListEvents();
};


// Allow the user to add a task to the todo list.
const addToListClickHandler = () => {
  let result = $e("#task").value.replace(/\ /g, '').length > 0 ? addToDo() : null;
  $e("#task").value = null; // Always null as addToDo returns null.
  render();
};


// The function that will be fired when the DOM is ready.
const ready = () => {
  render(); // Initial render.
  $e("#addToList").addEventListener('click', addToListClickHandler);
};


// An insanely lazy implementation of $(document).ready.
const delay = 250;
const fakeOnReady = setTimeout(ready, delay);

body {
  font-family: Arial, Helvetica, sans-serif;
}

#app ul li {
  max-width: 150px;
}

#app ul li span {
  float: right;
  color: red;
}

#app ul li span:hover {
  cursor: pointer;
}

在本地存储中存储复选框值

1 个答案:

PS