最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

第十五堂 – LocalStorage

XAMPP下载 admin 622浏览 0评论

這堂課比平常稍微長了一些,大約三十分鐘,課程中提到了許多觀念與細節,是許多人在開發中也常遇到的問題,而老師用了比較快速或是周全的方式來解決這些問題。有空沒事的同學可以來聽聽。

今天的實作範例如下

QQ截图20181105162615

 在輸入框輸入文字後enter或點+Add Item可以加入項目,而點選項目可以勾選或取消勾選。最重要的是,加入後的清單「重新整理後不會消失」!糾竟是怎麼做到的呢?讓我們繼續看下去…

邏輯流程
取得列表、輸入框等element
監聽輸入框submit
將輸入框內容包成物件放入Array
將內容包成HTML字串放入列表
監聽列表click
用localStorage的setItem和getItem來實現資料的存取
課程重點
e.preventDefault():避免submit時候reload page
localStorage.setItem():本實作的重點之一,可以將字串儲存在瀏覽器的儲存空間。若要從chrome來看,在開發人員工具→Application頁籤→Storage項目中的Local Storage→file://,就可以看到你存的[key,value]。setItem()參數要放自訂的item名稱,也就是key,以及item內容,實作中將內容包成JSON格式
localStorage.getItem():取得儲存在Local Storage的內容,參數是你在setItem時候的key值
延伸閱讀
this.reset():練習中用reset讓輸入框在輸入完後清空內容
用map()方式來做HTML字串
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>
<>
`;
}).join(”);
監聽勾選事件是監聽整個<ul>的click,而不是個別<li>。因為若監聽<li>,後來新增的<li>就不會被監聽。

转载请注明:XAMPP中文组官网 » 第十五堂 – LocalStorage

您必须 登录 才能发表评论!