15 LocalStorage

现在的初始页面中，点击提交按钮（Add Item）时页面默认触发 事件，并重新加载页面，这导致重新加载之后的页面中，已丢失刚提交的内容。页面所用到的 CSS 文件已经完成了，我们需要做的是完成 JavaScript 部分的内容，以实现目标效果。

• Event
  • event.preventDefault
• • localStorage.setItem()
  • localStorage.getItem()
• JSON
  • JSON.stringify()

1. 默认情况下，在表单空间拥有焦点时按下 Enter 键或者点击提交按钮，会提交表单，提交时，浏览器会在发送请求给服务器之前触发 事件，为了验证这个行为，我们可以添加事件监听后看看效果，此处先写一个处理函数：

2. 下面我们开始改造 addItem 方法，以实现我们的功能。
   首先在事件监听中，this 可以获取当前 form 即我们为其添加事件监听的 addItem 元素，所以可以借此方便的获取输入框中的值。在 方法中获取输入，并构造一个对象 item 来存储这个信息，：

3. 把对象放入此前声明好的数组 items，同时更新数据，包括页面中的 HTML 内容、LocalStorage。
   • HTML 内容更新
     声明一个 populateList 方法来更新页面的内容。接收需要更新的数组作为参数，根据数组里的内容构造一组 <li> 组成的列表，并且加上一些标识信息，以助于之后需要实现的选中功能。
   • LocalStorage 更新
     我们利用 LocalStorage 把信息存到本地，从而可以保证刷新后内容不变。但使用 localStorage 的时候，直接把 传入得到的值是 [object Object]，所以需要在把数据传进去之前就把内容转换成 String 类型的数据，之后读取时也使用 JSON.parse() 来将数据转换成 JSON 格式。