15、 LocalStorage

83 阅读 0 评论 55 点赞

我是靠谱客的博主威武豌豆，最近开发中收集的这篇文章主要介绍15、 LocalStorage，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

效果

在这里插入图片描述

知识点

Event
- event.preventDefault
- eventTarget.addEventListener
localStorage
- localStorage.setItem()
- localStorage.getItem()
JSON
- JSON.stringify()
- JSON.parse()

过程指南

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

addItems.addEventListener('submit', addItem);
```
点击按钮后发现 submit 事件触发后的结果是， Console 中闪现 hello 后刷新整个页面，这是 submit 的默认行为，在当前的场景中不适用，所以我们需要先去除此事件的默认行为。
```
function addItem(e) {
  e.preventDefault();
}
```
下面我们开始改造 addItem 方法，以实现我们的功能。
首先在事件监听中，this 可以获取当前 form 即我们为其添加事件监听的 addItem 元素，所以可以借此方便的获取输入框中的值。在 addItem() 方法中获取输入，并构造一个对象 item 来存储这个信息，：
```
/* function addItem(){} 中 */
const text = this.querySelector('[name=item]').value;
  const item = {
      text, // ES6中对 text: text, 的简写
      done: false // 为后续的勾选做准备
  }
```

把对象放入此前声明好的数组 items，同时更新数据，包括页面中的 HTML 内容、LocalStorage。

/* function addItem(){} 中 */
items.push(item);
this.reset();// 以清空 input 中正在输入的值
populateList(items, itemsList);
localStorage.setItem('items', JSON.stringify(items));

HTML 内容更新
声明一个 populateList 方法来更新页面的内容。接收需要更新的数组作为参数，根据数组里的内容构造一组 <li> 组成的列表，并且加上一些标识信息，以助于之后需要实现的选中功能。

function populateList(plates = [], plateslist) {
    plateslist.innerHTML = plates.map((plate, i) => {
        return `
          <li>
              <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} >
              <label for="item${i}">${plate.text}</label>
          </li>
        `;
    }).join('');
}

LocalStorage 更新

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>LocalStorage</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!--
      Fish SVG Cred:
      https://thenounproject.com/search/?q=fish&i=589236
   -->

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
    viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
    <g>
      <path
        d="M495.9,425.3H16.1c-5.2,0-10.1,2.9-12.5,7.6c-2.4,4.7-2.1,10.3,0.9,14.6l39,56.4c2.6,3.8,7,6.1,11.6,6.1h401.7   c4.6,0,9-2.3,11.6-6.1l39-56.4c3-4.3,3.3-9.9,0.9-14.6C506,428.2,501.1,425.3,495.9,425.3z M449.4,481.8H62.6L43,453.6H469   L449.4,481.8z" />
      <path
        d="M158.3,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1c-7.8,0-14.1,6.3-14.1,14.1v64.5   C144.2,115.7,150.5,122,158.3,122z" />
      <path
        d="M245.1,94.7c7.8,0,14.1-6.3,14.1-14.1V16.1c0-7.8-6.3-14.1-14.1-14.1C237.3,2,231,8.3,231,16.1v64.5   C231,88.4,237.3,94.7,245.1,94.7z" />
      <path
        d="M331.9,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1s-14.1,6.3-14.1,14.1v64.5   C317.8,115.7,324.1,122,331.9,122z" />
      <path
        d="M9.6,385.2c5.3,2.8,11.8,1.9,16.2-2.2l50.6-47.7c56.7,46.5,126.6,71.9,198.3,71.9c0,0,0,0,0,0   c87.5,0,169.7-36.6,231.4-103.2c5-5.4,5-13.8,0-19.2c-61.8-66.5-144-103.2-231.4-103.2c-72,0-142.2,25.6-199,72.5l-50-47.1   c-4.4-4.1-10.9-5-16.2-2.2c-5.3,2.8-8.3,8.7-7.4,14.6l11.6,75L2.2,370.6C1.3,376.5,4.2,382.4,9.6,385.2z M380.9,230.8   c34.9,14.3,67.2,35.7,95.3,63.6c-10.1,10-20.8,19.2-31.9,27.5c-22.4-3.3-29.6-8.8-30.7-9.7c-4-5.7-11.8-7.7-18.1-4.4   c-6.9,3.6-9.5,12.2-5.9,19.1c1.9,3.5,7.3,10.3,22.4,16c-10.1,5.7-20.5,10.7-31.1,15.1C352.4,320.2,352.4,268.6,380.9,230.8z    M36.3,255.6l29.4,27.7c5.3,5,13.6,5.1,19.1,0.3c53.2-47.6,120.7-73.7,190-73.7c26.9,0,53.2,3.9,78.5,11.3   c-29.3,44.6-29.3,102,0,146.6c-25.3,7.4-51.6,11.3-78.5,11.3c-69,0-136.3-26-189.4-73.2c-2.7-2.4-13.4-6.3-19.1,0.3l-30.1,28.3   l5.7-40C42.2,293,36.3,255.6,36.3,255.6z" />
      <circle cx="398.8" cy="273.8" r="14.1" />
    </g>
  </svg>

  <div class="wrapper">
    <h2>LOCAL TAPAS</h2>
    <p></p>
    <ul class="plates">
      <li>Loading Tapas...</li>
    </ul>
    <form class="add-items">
      <input type="text" name="item" placeholder="Item Name" required>
      <input type="submit" value="+ Add Item">
    </form>
  </div>

  <script>
    const addItems = document.querySelector('.add-items');
    const itemsList = document.querySelector('.plates');
    const items = [];

    addItems.addEventListener('submit', addItem);
    function addItem(e) {
      e.preventDefault();
      const text = this.querySelector('[name=item]').value;
      const item = {
        text, // ES6中对 text: text, 的简写
        done: false // 为后续的勾选做准备
      }
      items.push(item);
      this.reset();// 以清空 input 中正在输入的值
      populateList(items, itemsList);
      localStorage.setItem('items', JSON.stringify(items));
    }

    function populateList(plates = [], plateslist) {
      plateslist.innerHTML = plates.map((plate, i) => {
        return `
          <li>
              <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} >
              <label for="item${i}">${plate.text}</label>
          </li>
        `;
      }).join('');
    }

  </script>


</body>

</html>