根据id删除localstorage数据_原生js利用localstorage实现简易TODO list应用
前言：小生不才，只懂得一些皮毛，我努力以最簡(jiǎn)單的語言將心中的想法表述出來，讓更多人能夠很輕松的弄明白。文章里面有不足之處望各位大牛指出，使得后面的文章能夠朝著更好的方向發(fā)展。另外，大家記得點(diǎn)贊喲！
歡迎關(guān)注微信公眾號(hào)：前端切圖仔
參考文章：
天之藍(lán)源：三分鐘在GitHub上搭建個(gè)人博客?zhuanlan.zhihu.com天之藍(lán)源：零基礎(chǔ)Hexo+Github搭建靜態(tài)個(gè)人博客?zhuanlan.zhihu.com天之藍(lán)源：原生js實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本內(nèi)容?zhuanlan.zhihu.com天之藍(lán)源：九種跨域方式實(shí)現(xiàn)原理?zhuanlan.zhihu.com天之藍(lán)源：前端面試考點(diǎn)多？看這些文章就夠了（轉(zhuǎn)載）?zhuanlan.zhihu.com天之藍(lán)源：干貨！值得收藏的前端學(xué)習(xí)網(wǎng)站?zhuanlan.zhihu.com天之藍(lán)源：原生JS實(shí)現(xiàn)一個(gè)日期選擇器（DatePicker）組件?zhuanlan.zhihu.com天之藍(lán)源：原生js一步一步實(shí)現(xiàn)《別踩白塊兒》小游戲?zhuanlan.zhihu.com天之藍(lán)源：原生js利用localstorage實(shí)現(xiàn)簡(jiǎn)易TODO list應(yīng)用?zhuanlan.zhihu.com天之藍(lán)源：原生js實(shí)現(xiàn)瀑布流效果?zhuanlan.zhihu.com天之藍(lán)源：原生js實(shí)現(xiàn)圖片懶加載（lazyLoad）?zhuanlan.zhihu.com天之藍(lán)源：原生js實(shí)現(xiàn)簡(jiǎn)單路由切換?zhuanlan.zhihu.com實(shí)現(xiàn)的效果：
利用本地存儲(chǔ)實(shí)現(xiàn)todo 應(yīng)用https://www.zhihu.com/video/1073999114060042240一.todo list應(yīng)用是什么？
可能很多小伙伴剛學(xué)完js或者其他知識(shí)的時(shí)候，不知道該怎么練習(xí)和鞏固知識(shí)，然后這時(shí)候就可能會(huì)有人提出這樣一個(gè)建議：寫一個(gè)簡(jiǎn)單的todo list應(yīng)用吧！
todo list應(yīng)用其實(shí)很簡(jiǎn)單，就是一個(gè)待辦事項(xiàng)列表應(yīng)用，比如我們要做十件事，把這十件事添加到一個(gè)列表里面，然后辦完一件事，我們就從列表中刪除一件事，這就是一個(gè)最簡(jiǎn)單的todo list應(yīng)用。接下來我們就要來實(shí)現(xiàn)這樣一個(gè)最簡(jiǎn)單todo list應(yīng)用，想要更完善的todo list應(yīng)用可以自行百度學(xué)習(xí)更多知識(shí)。在本篇文章中我們利用localstorage將數(shù)據(jù)保存到本地，這樣刷新瀏覽器數(shù)據(jù)就不會(huì)消失了。
二.什么是localstorage？
localStorage是HTML5新增的一個(gè)特性，主要是用來作為本地存儲(chǔ)所使用的，我們都知道在之前，程序員們經(jīng)常把數(shù)據(jù)存在cookie中，然后cookie的存儲(chǔ)空間大約只有4kb，而新增的localStorage的存儲(chǔ)容量大約有5M左右，這就解決了cookie存儲(chǔ)容量不夠的問題。但是，localStorage還是有它的優(yōu)勢(shì)和劣勢(shì)的：
優(yōu)勢(shì)：
- localStorage拓展了cookie的4K限制
- localStorage會(huì)可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地，這個(gè)相當(dāng)于一個(gè)5M大小的針對(duì)于前端頁面的數(shù)據(jù)庫，相比于cookie可以節(jié)約帶寬，但是這個(gè)卻是只有在高版本的瀏覽器中才支持的
劣勢(shì)：
- 瀏覽器的大小不統(tǒng)一，并且在IE8以上的IE版本才支持localStorage這個(gè)屬性
- 目前所有的瀏覽器中都會(huì)把localStorage的值類型限定為string類型，這個(gè)在對(duì)我們?nèi)粘１容^常見的JSON對(duì)象類型需要一些轉(zhuǎn)換
- localStorage在瀏覽器的隱私模式下面是不可讀取的
- localStorage本質(zhì)上是對(duì)字符串的讀取，如果存儲(chǔ)內(nèi)容多的話會(huì)消耗內(nèi)存空間，會(huì)導(dǎo)致頁面變卡
- localStorage不能被爬蟲抓取到
另外：說起了localStorage，就不得不說一下sessionStorage，sessionStorage（會(huì)話存儲(chǔ)）和localStorage(本地存儲(chǔ))的區(qū)別就是localStorage屬于永久性存儲(chǔ)，而sessionStorage屬于當(dāng)會(huì)話結(jié)束的時(shí)候，sessionStorage中的值就會(huì)被清空。
用法：
不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個(gè)（以localStorage為例）：
- 保存數(shù)據(jù)：localStorage.setItem(key,value);
- 讀取數(shù)據(jù)：localStorage.getItem(key);
- 刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key);
- 刪除所有數(shù)據(jù)：localStorage.clear();
- 得到某個(gè)索引的key：localStorage.key(index);
提示: 鍵/值對(duì)通常以字符串存儲(chǔ)，你可以按自己的需要轉(zhuǎn)換該格式。
三.什么是事件委托？
事件委托是前端面試中的一道經(jīng)典題目，事件委托還有另外一個(gè)名字，事件代理。在紅皮書《JavaScript高級(jí)程序設(shè)計(jì)》里面是這樣解釋事件委托的：事件委托就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類型的所有事件。官方的語言始終是比較拗口，我們通俗一點(diǎn)來解釋：比如我們有10個(gè)DOM節(jié)點(diǎn)，我們需要給每一個(gè)DOM都添加一個(gè)相同事件，那么我們就需要執(zhí)行for循環(huán)給每個(gè)DOM元素添加事件，那要是有100個(gè)DOM元素呢，這樣一個(gè)一個(gè)的賦予事件就是很繁瑣的，而且這種繁瑣的操作，直接導(dǎo)致了頁面優(yōu)化的問題。因此我們就想到了另外一個(gè)方法，那就是利用JS里面的冒泡原理，至于冒泡顧名思義就是一層一層的往上冒或者一層一層的往下冒，這事件也是一樣，一層一層的往上冒，一層一層的往下冒，就這樣，我們只需要給一個(gè)DOM節(jié)點(diǎn)賦予了事件，那么所有的DOM節(jié)點(diǎn)都有了這個(gè)事件。
這里就簡(jiǎn)單說了一下大致原理，具體內(nèi)容可以百度：事件委托面試題等等，有很多不錯(cuò)的解釋。
四.實(shí)現(xiàn)思路及步驟
（一）頁面結(jié)構(gòu)------>HTML代碼
開局一條狗，后面全靠編。我們先把頁面結(jié)構(gòu)搭好，這才是第一步。
<body><div class="wrapper"><h2>我是前端切圖仔</h2><p></p><ul class="plates"><li>待添加事項(xiàng)</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>關(guān)于data-*屬性，可以參照W3C，上面解釋得挺清楚。
data-*屬性設(shè)置介紹（二）頁面樣式------>CSS代碼
沒有樣式的HTML代碼就是沒有靈魂的，那么我們來給他添加一點(diǎn)靈魂吧：
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代碼負(fù)責(zé)我們的邏輯部分，是整個(gè)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，將一個(gè)對(duì)象字符串轉(zhuǎn)換為對(duì)象//添加item方法function handleSubmit(e) {e.preventDefault();//阻止默認(rèn)事件的觸發(fā)，防止在提交后頁面自己刷新var name = this.querySelector('[name=item]').value;//獲取輸入框中的值var item = {name: name,done: false//增加一個(gè)狀態(tài)bool，后面會(huì)用到};items.push(item);localStorage.setItem('items', JSON.stringify(items));//將對(duì)象轉(zhuǎn)化為字符串，因?yàn)楸镜卮鎯?chǔ)只能以字符串的形式存儲(chǔ)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('');}//事件委托// 此處使用到了事件委托：// 假設(shè)我們隊(duì)一個(gè)input列表進(jìn)行了事件監(jiān)聽，但我們?nèi)绶ūＷC，此列表在接下來的狀態(tài)下是否進(jìn)行了更新，刷新等改變?cè)瓉砉?jié)點(diǎn)的操作，如果有這樣的操作出現(xiàn)，那么我們之前的事件監(jiān)聽器就無法再起到監(jiān)聽的作用；// 但我們可以對(duì)input列表的父元素進(jìn)行事件監(jiān)聽，讓它們的父元素處于監(jiān)聽狀態(tài)，當(dāng)我們所點(diǎn)擊的元素是其子元素的話，就告訴它的子元素，執(zhí)行相應(yīng)的事件；// 相當(dāng)于委托父元素幫我們監(jiān)聽所有子元素，這樣無論子元素列表進(jìn)行怎么樣的更新，改變，只要父元素節(jié)點(diǎn)不發(fā)生改變就可以持續(xù)起到監(jiān)聽的 作用。// 通過e.target.matches('input')可以判斷所點(diǎn)擊的元素是不是input元素，e.target返回所點(diǎn)擊的宿主元素。// 通過獲取到所點(diǎn)擊的列表的序號(hào)，更改其done屬性，更新后進(jìn)行存儲(chǔ)，就可以實(shí)現(xiàn)完成狀態(tài)的事件。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);//當(dāng)初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發(fā)，而無需等待樣式表、圖像和子框架的完成加載。另一個(gè)不同的事件 load 應(yīng)該僅用于檢測(cè)一個(gè)完全加載的頁面。 在使用 DOMContentLoaded 更加合適的情況下使用 load 是一個(gè)令人難以置信的流行的錯(cuò)誤，所以要謹(jǐn)慎。//注意：DOMContentLoaded 事件必須等待其所屬script之前的樣式表加載解析完成才會(huì)觸發(fā)。}());（四）所有代碼
五.總結(jié)
本次這個(gè)demo的核心就是localstorage（本地存儲(chǔ)）的使用以及事件委托的理解，筆者也是在邊寫代碼邊理解，參照網(wǎng)上一些大牛的代碼，遇到不懂的就上網(wǎng)百度，慢慢來實(shí)現(xiàn)。我們可以回顧一下我們是怎么做的：
- 首先，一進(jìn)入頁面就添加事件DOMContentLoaded ，執(zhí)行函數(shù)newFun
- 然后就是獲取dom元素和本地存儲(chǔ)的元素
- 然后有三個(gè)方法，分別是添加item元素，監(jiān)聽input列表方法，和點(diǎn)擊button所執(zhí)行的方法
- 執(zhí)行相應(yīng)的函數(shù)
總的來說，雖然流程是比較清楚的，但是代碼的細(xì)節(jié)還是需要仔細(xì)斟酌。
六.補(bǔ)充
在瀏覽器退出的時(shí)候可以清除一下緩存，因?yàn)檫@畢竟是我們的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; };七.源代碼
更多源代碼請(qǐng)移步GitHub
Hacker233/JavaScript?github.com總結(jié)
以上是生活随笔為你收集整理的根据id删除localstorage数据_原生js利用localstorage实现简易TODO list应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么是操作系统病毒
- 下一篇： txt文档批量转为excel_Excel