[JS作品]JS30系列15 – LocalStorage

 

作品網址：

Demo作品連結
JavaScript 30 作品目錄

 

 

主題目標

  • 讓使用者可以自行記錄該小吃的項目，並確認是否選擇，只要使用同電腦同瀏覽器，前一次輸入資料將會保留(不主動清除的話)；此篇主題為使用 LocalStorage ，所以除了看畫面之外，可以搭配 Console 來觀看。

 

 

處理步驟

步驟 1.

步驟 2.

  • 取得輸入框的輸入值
  • 將輸入資料增加到陣列變數
  • 將陣列資料回存至 localStorage

步驟 3.

  • 使用 JS 來動態增加 html tag ，此處範例直接使用 Template literals
  • 將方法分解至單筆資料新增的 populateItem function
  • 利用 Array.prototype.map() 來完成

步驟 4.

  • 進行選單勾選的事件
  • 勾選後更新 items 變數與更新 localStorage

特別技術、函式

<HTML>

在HTML 內容中應用SVG 效果

可縮放向量圖形 (Scalable Vector Graphics，SVG) 是用於描述二維向量圖形的 XML 標記語言。基本上，SVG 用於圖形，而 XHTML 用於文字。
SVG 類似 Adobe 專有的 Flash 技術，SVG 與 Flash 兩者最大的分別在於 SVG 為 W3C 所推薦 (即標準)，並以 XML 為基礎，而非封閉的二進制格式。SVG 設計為與其他 W3C 標準 (如 CSS、DOM 及 SMIL) 一同運作。

HTML 標籤的for 屬性

與<label>元素一起使用時，for屬性指定標籤綁定到的表單元素。

與<output>元素一起使用時，for屬性指定計算結果與計算中使用的元素之間的關係。

<CSS>

<JavaScript>

Window.localStorage

localStorage 這個唯讀屬性允許你讀取 Storage object for the Document's origin; 被儲存的資料被存在 across browser sessions. localStorage 跟 sessionStorage大致上相似，除了儲存在 localStorage 內的資料沒有逾期時間外，當頁面session結束時，存在 sessionStorage 內的資料就會被清空 — 也就是當頁面被關閉的時候。

資料暫存在瀏覽器上，並且不會自動刪除，除非自行清除瀏覽資料；使用無痕瀏覽的話，關閉視窗等於清除掉。

Document.createElement()

於 HTML 文件中，Document.createElement() 方法可以依指定的標籤名稱（tagName）建立 HTML 元素，或是在未定義標籤名稱下建立一個 HTMLUnknownElement。在 XUL 文件中，Document.createElement() 將會建立指定的 XUL 元素。而在其它文件，則會建立一個 namespace URI 為 null 的元素。

event.preventDefault

Event接口的preventDefault()方法，告訴user agent：如果此事件沒有被顯式處理，它默認的動作也不應該照常執行。此事件還是繼續傳播，除非碰到事件偵聽器調用stopPropagation()或stopImmediatePropagation()，才停止傳播。

可以參考了解[筆記][JavaScript]所謂的「停止事件」到底是怎麼一回事？

Array.prototype.map()

map() 方法會建立一個新的陣列，其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

參考資料：

JS30紀錄 15-LocalStorage： https://shunnien.github.io/2018/01/04/Javascript30days-15/

Js 30 day 中文指南：https://github.com/soyaine/JavaScript30

Tags:

Steven玄

謝謝您觀看本站內容!! 😅 西元93年台灣男，軟體前、後、資料庫工程師 和 多元收入實踐，程式設計、網站系統規劃、商業策略分析規劃、多元收入研究，目前在網站開發公司擔任工程師。

發佈留言