根据id删除localstorage数据_原生js利用localstorage实现简易TODO list应用
前言：小生不才，只懂得一些皮毛，我努力以最簡單的語言將心中的想法表述出來，讓更多人能夠很輕松的弄明白。文章里面有不足之處望各位大牛指出，使得后面的文章能夠朝著更好的方向發展。另外，大家記得點贊喲！
歡迎關注微信公眾號：前端切圖仔
參考文章：
天之藍源：三分鐘在GitHub上搭建個人博客?zhuanlan.zhihu.com天之藍源：零基礎Hexo+Github搭建靜態個人博客?zhuanlan.zhihu.com天之藍源：原生js實現點擊按鈕復制文本內容?zhuanlan.zhihu.com天之藍源：九種跨域方式實現原理?zhuanlan.zhihu.com天之藍源：前端面試考點多？看這些文章就夠了（轉載）?zhuanlan.zhihu.com天之藍源：干貨！值得收藏的前端學習網站?zhuanlan.zhihu.com天之藍源：原生JS實現一個日期選擇器（DatePicker）組件?zhuanlan.zhihu.com天之藍源：原生js一步一步實現《別踩白塊兒》小游戲?zhuanlan.zhihu.com天之藍源：原生js利用localstorage實現簡易TODO list應用?zhuanlan.zhihu.com天之藍源：原生js實現瀑布流效果?zhuanlan.zhihu.com天之藍源：原生js實現圖片懶加載（lazyLoad）?zhuanlan.zhihu.com天之藍源：原生js實現簡單路由切換?zhuanlan.zhihu.com實現的效果：
利用本地存儲實現todo 應用https://www.zhihu.com/video/1073999114060042240一.todo list應用是什么？
可能很多小伙伴剛學完js或者其他知識的時候，不知道該怎么練習和鞏固知識，然后這時候就可能會有人提出這樣一個建議：寫一個簡單的todo list應用吧！
todo list應用其實很簡單，就是一個待辦事項列表應用，比如我們要做十件事，把這十件事添加到一個列表里面，然后辦完一件事，我們就從列表中刪除一件事，這就是一個最簡單的todo list應用。接下來我們就要來實現這樣一個最簡單todo list應用，想要更完善的todo list應用可以自行百度學習更多知識。在本篇文章中我們利用localstorage將數據保存到本地，這樣刷新瀏覽器數據就不會消失了。
二.什么是localstorage？
localStorage是HTML5新增的一個特性，主要是用來作為本地存儲所使用的，我們都知道在之前，程序員們經常把數據存在cookie中，然后cookie的存儲空間大約只有4kb，而新增的localStorage的存儲容量大約有5M左右，這就解決了cookie存儲容量不夠的問題。但是，localStorage還是有它的優勢和劣勢的：
優勢：
- localStorage拓展了cookie的4K限制
- localStorage會可以將第一次請求的數據直接存儲到本地，這個相當于一個5M大小的針對于前端頁面的數據庫，相比于cookie可以節約帶寬，但是這個卻是只有在高版本的瀏覽器中才支持的
劣勢：
- 瀏覽器的大小不統一，并且在IE8以上的IE版本才支持localStorage這個屬性
- 目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換
- localStorage在瀏覽器的隱私模式下面是不可讀取的
- localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡
- localStorage不能被爬蟲抓取到
另外：說起了localStorage，就不得不說一下sessionStorage，sessionStorage（會話存儲）和localStorage(本地存儲)的區別就是localStorage屬于永久性存儲，而sessionStorage屬于當會話結束的時候，sessionStorage中的值就會被清空。
用法：
不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：
- 保存數據：localStorage.setItem(key,value);
- 讀取數據：localStorage.getItem(key);
- 刪除單個數據：localStorage.removeItem(key);
- 刪除所有數據：localStorage.clear();
- 得到某個索引的key：localStorage.key(index);
提示: 鍵/值對通常以字符串存儲，你可以按自己的需要轉換該格式。
三.什么是事件委托？
事件委托是前端面試中的一道經典題目，事件委托還有另外一個名字，事件代理。在紅皮書《JavaScript高級程序設計》里面是這樣解釋事件委托的：事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。官方的語言始終是比較拗口，我們通俗一點來解釋：比如我們有10個DOM節點，我們需要給每一個DOM都添加一個相同事件，那么我們就需要執行for循環給每個DOM元素添加事件，那要是有100個DOM元素呢，這樣一個一個的賦予事件就是很繁瑣的，而且這種繁瑣的操作，直接導致了頁面優化的問題。因此我們就想到了另外一個方法，那就是利用JS里面的冒泡原理，至于冒泡顧名思義就是一層一層的往上冒或者一層一層的往下冒，這事件也是一樣，一層一層的往上冒，一層一層的往下冒，就這樣，我們只需要給一個DOM節點賦予了事件，那么所有的DOM節點都有了這個事件。
這里就簡單說了一下大致原理，具體內容可以百度：事件委托面試題等等，有很多不錯的解釋。
四.實現思路及步驟
（一）頁面結構------>HTML代碼
開局一條狗，后面全靠編。我們先把頁面結構搭好，這才是第一步。
<body><div class="wrapper"><h2>我是前端切圖仔</h2><p></p><ul class="plates"><li>待添加事項</li></ul><form class="add-items"><input type="text" name="item" placeholder="Item Name" required><input type="submit" value="添 加"></form><div class="buttons"><button data-action="clear">刪除所有</button><button data-action="check">全部選中</button><button data-action="uncheck">取消全選</button></div></div> </body>關于data-*屬性，可以參照W3C，上面解釋得挺清楚。
data-*屬性設置介紹（二）頁面樣式------>CSS代碼
沒有樣式的HTML代碼就是沒有靈魂的，那么我們來給他添加一點靈魂吧：
html {min-height: 100vh;display: flex;justify-content: center;align-items: center; }.wrapper {padding: 20px;max-width: 350px;background: rgba(228, 215, 215, 0.95);box-shadow: 0 0 0 5px rgba(187, 157, 157, 0.5); } 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:10px;outline:0;border:1px solid rgba(0,0,0,0.1); } .add-items input:nth-child(1){width: 61.3%; } .add-items input:nth-child(2) {width: 30%;color: rgb(85, 108, 128);font-weight: 700; } .buttons button {width: 100px;margin-top: 10px;height: 40px;color: rgb(85, 108, 128);font-weight: 700;border:1px solid rgba(0,0,0,0.1); } 添加CSS樣式后的頁面（三）頁面邏輯------>JS代碼
下面是最重要的js代碼了，js代碼負責我們的邏輯部分，是整個demo的核心，只要大家跟著注釋解析代碼很容易理解。
(function(){function newFun() {var addItems = document.querySelector('.add-items');//選中類為.add-items的元素var itemsList = document.querySelector('.plates');//todolist列表var buttons = document.querySelector('.buttons');var items = JSON.parse(localStorage.getItem('items')) || [];//獲取本地緩存到的所有item，將一個對象字符串轉換為對象//添加item方法function handleSubmit(e) {e.preventDefault();//阻止默認事件的觸發，防止在提交后頁面自己刷新var name = this.querySelector('[name=item]').value;//獲取輸入框中的值var item = {name: name,done: false//增加一個狀態bool，后面會用到};items.push(item);localStorage.setItem('items', JSON.stringify(items));//將對象轉化為字符串，因為本地存儲只能以字符串的形式存儲updateList( items, itemsList);//更新列表this.reset();}function updateList(plates = [], plateList) {plateList.innerHTML = plates.map( function(plate, i) {return '<li><input type="checkbox" data-index="' + i + '" id="plate' + i + '" ' + (plate.done ? 'checked' : '') + ' /><label for="plate' + i + '">' + plate.name + '</label></li>';}).join('');}//事件委托// 此處使用到了事件委托：// 假設我們隊一個input列表進行了事件監聽，但我們如法保證，此列表在接下來的狀態下是否進行了更新，刷新等改變原來節點的操作，如果有這樣的操作出現，那么我們之前的事件監聽器就無法再起到監聽的作用；// 但我們可以對input列表的父元素進行事件監聽，讓它們的父元素處于監聽狀態，當我們所點擊的元素是其子元素的話，就告訴它的子元素，執行相應的事件；// 相當于委托父元素幫我們監聽所有子元素，這樣無論子元素列表進行怎么樣的更新，改變，只要父元素節點不發生改變就可以持續起到監聽的 作用。// 通過e.target.matches('input')可以判斷所點擊的元素是不是input元素，e.target返回所點擊的宿主元素。// 通過獲取到所點擊的列表的序號，更改其done屬性，更新后進行存儲，就可以實現完成狀態的事件。function toggleChecked(e) {if (!e.target.matches('input')) return;var item = e.target.dataset.index;items[item].done = !items[item].done;localStorage.setItem('items', JSON.stringify(items));updateList( items, itemsList);}//添加button事件function doButtonPress(e) {var action = e.target.dataset.action;switch (action) {case "clear":items = [];break;case "check":items.map( function(item) {return item.done = true;} );break;case "uncheck":items.map( function(item) {return item.done = false ;} );break;default:return;}localStorage.setItem('items', JSON.stringify(items));updateList( items, itemsList);}addItems.addEventListener('submit', handleSubmit);itemsList.addEventListener('click', toggleChecked);buttons.addEventListener('click', doButtonPress);updateList(items, itemsList);}document.addEventListener('DOMContentLoaded', newFun);//當初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發，而無需等待樣式表、圖像和子框架的完成加載。另一個不同的事件 load 應該僅用于檢測一個完全加載的頁面。 在使用 DOMContentLoaded 更加合適的情況下使用 load 是一個令人難以置信的流行的錯誤，所以要謹慎。//注意：DOMContentLoaded 事件必須等待其所屬script之前的樣式表加載解析完成才會觸發。}());（四）所有代碼
五.總結
本次這個demo的核心就是localstorage（本地存儲）的使用以及事件委托的理解，筆者也是在邊寫代碼邊理解，參照網上一些大牛的代碼，遇到不懂的就上網百度，慢慢來實現。我們可以回顧一下我們是怎么做的：
- 首先，一進入頁面就添加事件DOMContentLoaded ，執行函數newFun
- 然后就是獲取dom元素和本地存儲的元素
- 然后有三個方法，分別是添加item元素，監聽input列表方法，和點擊button所執行的方法
- 執行相應的函數
總的來說，雖然流程是比較清楚的，但是代碼的細節還是需要仔細斟酌。
六.補充
在瀏覽器退出的時候可以清除一下緩存，因為這畢竟是我們的demo，沒那么正式：
window.onbeforeunload = function (e) {localStorage.removeItem('items');e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+ }; window.onbeforeunload = function (event) {var message = 'Important: Please click on 'Save' button to leave this page.';if (typeof event == 'undefined') {event = window.event;}if (event) {event.returnValue = message;}return message; };七.源代碼
更多源代碼請移步GitHub
Hacker233/JavaScript?github.com總結
以上是生活随笔為你收集整理的根据id删除localstorage数据_原生js利用localstorage实现简易TODO list应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么是操作系统病毒
- 下一篇： txt文档批量转为excel_Excel