Day15 JS调用与建立Local Storage

第15天的内容是类似一个todolist
把内容存到localStorage里防止每次打开就没有之前的内容
js脚本内嵌在html里，css写在另一个文件里

HTML

写了一个logo放在上面
下面一个div里放着列表、输入框和提交按钮

  
  
  


   
    
  

    
To Do It
    

    

      
Loading...
    
    

      
      
    
    
clear all
  

这个不是重点

JavaScript

如果不考虑list内容需不需要checked，只需要一个列表的话
只要addItem和populateList函数就够了，然后加个监听
toggleDone是为了刷新是否checked，还加了个clear的监听

用到的函数

• Array.map() 返回一个新数组
• Array.push() 将内容添加到数组里
• JSON 一个数据储存与读取库，可以按一定的规则存储数据
  • JSON.Stringfy() 将数组转化为JSON格式String
  • JSON.parse() 还原JSON字符串为数组或字典
• preventDefault() 阻止自带函数

讨论

实现目标效果不是很难，或者说比我想象的简单一点，但用localStorage总觉得有点问题。
如果是服务端的话，那应该会在服务器哪里存着，然后根据http请求的头文件找对应文件。

css部分觉得难搞多了，给input按钮加了个:hover和:actice，果然使用体验好多了，没有反馈的交互按键真是不合理的东西。

CSS源码

    html {
      box-sizing: border-box;
      background:url('/15\ -\ LocalStorage/photo-1551300444-2a7ea9b69f2e.jpg') center no-repeat;
      background-size:cover;
      /* min-height:100vh;*/
      display:flex;
      justify-content: center;
      /* align-items: center; */
      text-align: center;
      font-family: Futura,"Trebuchet MS",Arial,sans-serif
    }
    *, *:before, *:after {box-sizing: inherit; }
    img {
      fill:white;
      background: rgba(255,255,255,0.4);
      padding: 20px;
      border-radius: 50%;
      width:150px;
      margin-bottom: 20px;
    }
    .wrapper {
      padding: 20px;
      max-width: 350px;
      background: rgba(255,255,255,0.95);
      box-shadow: 0 0 0 10px rgba(0,0,0,0.1);
      padding-bottom: 5px;
    }
    h2 {
      text-align: center;
      margin: 0;
      font-weight: 200;
    }
    .plates {
      margin: 0;
      padding: 0;
      text-align: left;
      list-style: none;
    }
    .plates li {
      border-bottom: 1px solid rgba(0,0,0,0.2);
      padding: 10px 0;
      font-weight: 100;
      display: flex;
    }
    .plates label {
      flex:1;
      cursor: pointer;
    }
    .plates input {
      display: none;
    }
    .plates input + label:before {
      content: '⬜️';
      margin-right: 10px;
    }
    .plates input:checked + label:before {
      content: '☑️';
    }
    .add-items {
      margin-top: 20px;
    }
    .add-items input {
      padding:8px;
      padding-left: 12px;
      padding-right: 12px;
      outline:0;
      border:1px solid rgba(0,0,0,0.1);
      margin-left: 10px;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
      text-shadow: 1px 1px 2px rgba(0,0,0,.2); 
    }
    .add-items input:hover{
      background-color: #81ecec;
    }
    .add-items input:active{
      background-color: #0984e3;
    }
    .add-items input[type=text] {
      border-radius: 12px;
      cursor: text;
    }
    .add-items input[type=text]:hover {
      background-color: #fff;
    }
    .clear{
      margin-top: 10px;
      margin-bottom: 10px;
      width: 60px;
      color: #b2bec3;
      margin-left: auto;
      margin-right: auto;
    }
    .clear:hover{
      cursor: pointer;
    }
    .clear:active{
      color: #0984e3;
    }
    body{
      margin-top: 100px;
    }