如何将列表数据保存到本地存储

Question

我在用HTML/JavaScript做一个待办事项网页，我只显示了优先级高的用户输入的内容。我需要使用JavaScript将该内容保存在本地存储中（刷新页面后输入的内容也必须存在）。

下面你可以看到我的代码。我相信我应该为此使用数组，但我不知道如何使用本地存储 'get item'、'set item'、'JSON.stringfy' 和 'JSON.parse'。拜托，你能帮帮我吗？

function Changecolor() {
  var lists = document.getElementsByClassName('task-list')[0];
  btn_colors = {
    'hi': 'hiP',
    'med': 'medP',
    'low': 'lowP'
  }
  radios = document.getElementsByName('rgPrior');

  for (var i = 0, length = radios.length; i < length; i++) {
    if (radios[i].checked) {
      btn_selected_color = (btn_colors[radios[i].value]);
      break;
    }
  }
  var todo = document.getElementById('item').value;
  var entry = document.createElement('li');
  entry.className = btn_selected_color;
  entry.appendChild(document.createTextNode(todo));
  lists.appendChild(entry);
}

.hiP {
  background-color: red;
}

.medP {
  background-color: blue;
}

.lowP {
  background-color: green;
}

.ch5 {
  padding-left: 30px;
}

<form>
  <label for="txtAdd">New thing to do:</label>
  <input name="txtAdd" type="text" id="item" />
  <input type="button" name="btnAdd" id="btnAdd" value="Add List" onClick="Changecolor()" />
</form>
<p>Set Priority</p>
<p>
  <label><input type="radio" name="rgPrior" value="hi" id="rgPrior_0"/>High</label>
  <br>
  <label><input type="radio" name="rgPrior" value="med" id="rgPrior_1"/>Medium</label>
  <br/>
  <label><input type="radio" name="rgPrior" value="low" id="rgPrior_2"/>Low</label>
  <br/>
</p>
<ul class="task-list" id="store"> </ul>

<button>Delete</button>

Answer 1

JSON.stringify()将JavaScriptarray/object转换为可保存在localStorage中的字符串，JSON.parse()将[=11]中保存的字符串转换=] 到 JavaScript array/object.

CodePen link（不适用于 Whosebug）
https://codepen.io/LuisAFK/pen/ZEKLLEZ

如何将列表数据保存到本地存储

How to save the list data in local storage

html

javascript

output