JavaScript 入門教學（五）：用 localStorage 讓網頁記住資料

還記得第二篇的待辦清單嗎？只要重新整理網頁，所有項目就消失了。這一篇要用一個很簡單的功能解決這個問題：localStorage。它可以把資料存在使用者的瀏覽器裡，關掉網頁再打開，資料還在。

一、什麼是 localStorage？

localStorage 是瀏覽器內建的小型儲存空間，以「名稱（key）」與「值（value）」成對存放資料，不需要伺服器或資料庫。

• 關閉瀏覽器後資料依然存在。
• 每個網站各自獨立，彼此看不到對方的資料。
• 容量大約 5MB，適合存放設定、簡單清單等小資料。
• 只能存「字串」。

二、四個基本指令

在瀏覽器按 F12 打開 Console，直接輸入看看：

// 1. 存入資料
localStorage.setItem("username", "小明");

// 2. 讀取資料
console.log(localStorage.getItem("username"));   // 小明

// 3. 刪除單筆資料
localStorage.removeItem("username");

// 4. 清空全部資料
localStorage.clear();

如果讀取一個不存在的名稱，會得到 null。

想親眼看到資料存在哪裡：按 F12，切換到「Application（應用程式）」分頁，左側找到 Local Storage，就能看到存起來的內容。

三、存放陣列與物件

localStorage 只能存字串，所以陣列和物件要先用 JSON.stringify() 轉成字串，讀取時再用 JSON.parse() 轉回來：

const fruits = ["蘋果", "香蕉", "橘子"];

// 存入：陣列 → 字串
localStorage.setItem("fruits", JSON.stringify(fruits));

// 讀取：字串 → 陣列
const saved = JSON.parse(localStorage.getItem("fruits"));
console.log(saved[0]);   // 蘋果

如果忘記轉換，存進去的會變成 [object Object] 這種沒有用的字串，這是初學者最常犯的錯。

JavaScript 入門教學（四）：ES6+ 現代語法（解構、展開運算子、模組）

ES6（ECMAScript 2015）是 JavaScript 歷史上最大的一次更新，之後每年也持續加入新功能，這些統稱為 ES6+。前面幾篇我們已經用過其中一部分，例如 let／const、箭頭函式、樣板字面值與 async/await。這一篇要介紹另外幾個最實用的現代語法：解構、展開運算子、物件簡寫、可選串連、模組等，讓你的程式碼更簡潔、更好讀。

一、解構賦值（Destructuring）

解構可以把陣列或物件中的值，一次拆出來指定給多個變數。

1. 陣列解構

const colors = ["紅", "綠", "藍"];

// 舊寫法
// const first = colors[0];
// const second = colors[1];

// 解構寫法
const [first, second, third] = colors;
console.log(first, second, third);   // 紅 綠 藍

// 略過不需要的項目
const [, , last] = colors;
console.log(last);                   // 藍

// 交換兩個變數的值
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b);                   // 2 1

JavaScript 入門教學（三）：非同步程式設計（Promise、async/await 與 fetch）

前兩篇我們學會了 JavaScript 的基礎語法，以及如何用 DOM 與事件讓網頁互動。但在實際開發中，網頁常常需要「等待」某些事情完成，例如向伺服器要資料、讀取檔案、等待計時器。這一篇要介紹的就是處理等待的方法：非同步程式設計，包括 Promise、async/await 與 fetch。

一、同步與非同步

JavaScript 一次只能做一件事（單執行緒）。如果每個動作都要等前一個做完，遇到需要等待的工作，整個網頁就會卡住。因此，耗時的工作會被丟到一旁等待，其他程式碼先繼續執行，這就是非同步。

先看一個經典的例子，請猜猜輸出順序：

console.log("1. 開始");

setTimeout(function () {
  console.log("2. 兩秒後執行");
}, 2000);

console.log("3. 結束");

實際輸出順序是：1 → 3 → 2。setTimeout 把工作交給瀏覽器計時，JavaScript 不會停下來等它，而是先執行後面的程式碼，時間到了再回頭執行回呼函式（callback）。

二、回呼地獄（Callback Hell）

早期處理非同步只能靠回呼函式。當多個非同步動作需要依序執行時，程式碼會一層包一層，難以閱讀與維護：

setTimeout(function () {
  console.log("步驟 1 完成");
  setTimeout(function () {
    console.log("步驟 2 完成");
    setTimeout(function () {
      console.log("步驟 3 完成");
    }, 1000);
  }, 1000);
}, 1000);

為了解決這個問題，ES6 引進了 Promise。

三、Promise

Promise 代表「一個未來才會完成的結果」，就像餐廳給你的取餐號碼牌：現在還沒有餐點，但保證之後會通知你成功或失敗。它有三種狀態：

狀態	說明
pending	等待中，尚未有結果
fulfilled	成功完成
rejected	失敗