Javascript：使用网络存储创建购物清单

Question

我有以下练习题，我很难理解：

到目前为止，我已经开始编写代码了：

<!DOCTYPE html>
<html>
<head>
<title></title>
 <script>
  function addItem(){
   var form = document.getElementById("form1");
   var item = form.elements["name"].value;
   var cost = form.elements["price"].value;
   
   //what should I do next?
  }
  
  function removeItem(){
   //remove item code here
  }
 </script>
</head>
<body>
 <form id="form1">
  Item Name: <input name="name" type="text">
  Item Cost: <input name="price" type="text">
  <button onclick="addItem()">Add</button>
  <button onclick="removeItem()">Remove</button>
 </form>
 <div id="div1">
  <ul id="ul1">
  </ul>
 </div>
</body>
</html>

我已经有了我希望页面外观的基本结构。我知道我将不得不创建两个函数来处理问题中的添加项目和删除项目标准。但是，我有点迷失在必须保存用户输入的地方。我知道我必须使用网络存储和可能的阵列？这应该如何编码？

将不胜感激任何见解。提前致谢。

Answer 1

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

来源：Storing Objects in HTML5 localStorage

Javascript：使用网络存储创建购物清单

Javascript: Creating a Shopping List Using Web Storage

javascript

html

function

web-storage