LocalStorage-JavaScript-Challenge

今天药忘吃喽~ 2022-05-20 01:46 167阅读 0赞

## 效果图： ##

![这里写图片描述][70]

## 实现思路： ##

##### body部分： #####

<div class="wrapper">
        <h2>Local Tapas</h2>
        <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="+AddItem">
        </form>
    </div>

### js部分： ###

*  **所要用到的变量**

> 1.  添加按钮：  
>     `const addItems = document.querySelector('.add-items');`
> 2.  todoList列表  
>     `const itemList = document.querySelector('.plates');`
> 3.  本地缓存，将所有的todoItem进行缓存。  
>     `const items = JSON.parse(localStorage.getItem('items'))||[];`

*    
    
 *  **添加item事件**

>   
> 1. 监听addItems的submit事件，当用户点击提交按钮或者点击enter键时触发；  
>   
> 2. **localStorage的常用API:**  
>   
> `localStorage.setItem('key',value);`设置以`key-value`形式本地缓存  
>   
> `localStorage.getItem('key');`根据key值获取本地缓存对应的值。  
>   
> `localStorage.clear();`清空本地的缓存  
>   
> `localStorage.removeItem('key');`删除key所对应的缓存。  
>   
> 3. localStorage中只能存储字符串，所以必须用`JSON.stringify(obj)`将一个对象转换为字符串，再使用`JSON.parse(objString)`将字符串转换为对象。  
>   
> 4.this.reset()；将表单重置。  
>

function addItem(e) { 
            e.preventDefault();//阻止默认事件的触发，防止在提交时页面自己刷新
            const text = (this.querySelector('[name=item]')).value;
            const item = {
                text,//text:text;
                done: false //确定是否完成图标
            };
    
            items.push(item);
            populateList(items, itemList);//将其item展示出来。
            localStorage.setItem('items', JSON.stringify(items));
            //添加完数据之后，重置输入框
            this.reset();
        }
        addItems.addEventListener('submit', addItem);

*  列表显示：

> 将所有列表项转化为li传入页面的html中。

代码：

//设置默认值，防止传参出错的时候crash
        //之所以用‘’空字符是因为如果用null的话，会出现在html中
        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('');//join()之后一定要加‘’，表示空字符，否则会加入逗号，造成错误
        }

*  状态的转换：

> 1.  使用了事件委托。对input列表的父组件进行事件监听，让他们的父元素处于监听状态，当我们所点击的元素是其子元素，就告诉它的子元素，执行相应的事件。
> 2.  通过`e.target.matches('input')`判断所点击的元素是不是input元素,e.target返回所点击的宿主元素。

代码：

//切换完成状态
        function toggleDone(e) { 
            //跳过所有的input,只处理label
            if (!e.target.matches('input')) return;
            const el = e.target;
            const index = el.dataset.index;
            items[index].done = !items[index].done;
            localStorage.setItem('items', JSON.stringify(items));
            populateList(items, itemList);
        }
    
       itemList.addEventListener('click', toggleDone);

*  清除缓存

//清除LocalStorage缓存，尤其在生产环境中
         window.onbeforeunload=function (e) { 
             localStorage.removeItem('items');
             e.returnValue=confirmationMessage;
         }

## 总结： ##

> 1.  在页面加载的时候，先获取本地缓存的items，若存在就传给变量items,若第一次登录或者无item,初始化为空数组；
> 2.  在页面加载的时候先加载页面的所有todoList，再执行populateList(items, itemsList);

[这个博客上面有记录所有的js-challanges!][js-challanges]

[70]: /images/20220520/2b7fc4c05d78426fa9639512dddd5992.png
[js-challanges]: https://blog.csdn.net/liyuechun520/article/details/76649135