JS30紀錄 15-LocalStorage

目標

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

Demo | Github

處理步驟

步驟 1.

• 讓變數讀取 localStorage 的資料，沒有的話給予空陣列
• 設定按鈕事件，並讓事件停止冒泡
• 添加各種瀏覽器的停止冒泡功能

/**
 * 事件停止冒泡
 * @param {*} event
 */
function stopPopup(event) {
  if (!event) event = window.event;
  event.cancelBubble = true;
  event.returnValue = false;
  if (event.stopPropagation) {
    event.preventDefault();
    event.stopPropagation();
  }
  return false;
}

步驟 2.

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

步驟 3.

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

步驟 4.

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

筆記與備註事項

HTML 部分

此次範例中的魚標誌，是使用 SVG 繪製

SVG

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

JavaScript 部分

Window.localStorage

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

Document.createElement()

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

參考資料

• JavaScript 30 day
• 作者 Github Wes Bos
• Js 30 day 中文指南
• 瓜瓜的 JS 30
• 我的 JS 30 練習Github