線上購物清單範本是一種結構化的檢查清單,您可以在瀏覽器中填寫,具備八個介面分類、購買切換、重複保護,以及一份可複製的精確清單,方便傳送到您的手機或備忘錄應用程式。線上購物清單範本可在這個瀏覽器設定檔的本機儲存空間(localStorage)中存放最多 100 個不重複的項目,每個名稱上限為 80 個 Unicode 字碼點(code points),且不接受任何會破壞畫面呈現、剪貼簿輸出或行動裝置互動的內容。您輸入名稱、從限定範圍中選擇一個分類,然後將其新增;之後您可以將已購買的項目標記起來、移除個別列,或一次清除所有已勾選的列,同時檢視剩下的項目。名稱會經過修剪,內部的連續空白會被壓縮為一個一般空格,因此一個不小心多打的前置空白或雙倍空白不會悄悄產生看起來像同一個項目的第二列。重複偵測不區分大小寫,因此 Milk 與 milk 會被視為同一項,而範本會明確回傳錯誤,而不是產生兩個令人困惑的列。分類包含 Produce(農產品)、Dairy(乳製品)、Bakery(烘焙食品)、Meat(肉類)、Pantry(儲藏室食品)、Frozen(冷凍食品)、Household(家居用品)以及 Other(其他),當產品不符合這個簡易分類時,永遠都有字面上的 Other 選項可用。剪貼簿的輸出格式為每行一個項目,因此當您將清單複製到手機時,範本同時也是一份清楚易讀的購物檢查表。

online grocery list template
線上購物清單範本:在您的瀏覽器中建立它

瀏覽器型與可列印購物清單範本的比較

靜態的可列印範本 — 在範本庫中出現的 PDF、Excel、Word 和 Google 試算表選項 — 雖然有用,但它們要求一些瀏覽器型購物清單範本不需要的東西:下載、印表機、儲存格公式,或 Google 帳號。線上購物清單範本完全不需要這些東西。清單儲存在您瀏覽器的本機儲存空間中,這是網站用來在使用者的機器上保存小型狀態資料的、按來源區分(per-origin)的鍵值儲存,如 MDN Window localStorage 參考文件所述。您清單中的內容不會被上傳到任何伺服器,因此不需要建立帳號,也沒有需要保護的試算表欄位。

代價是持久性。可列印的版本存放在資料夾或檔案櫃中,能夠承受新筆電、新手機或快取被清除的情況。瀏覽器儲存的清單可能在您清除網站資料、切換瀏覽器、開啟私密視窗或更換裝置時消失。如果您的購物流程需要在不同機器之間使用同一份清單,那麼可列印版本或雲端文件仍然是較安全的歸宿。如果您的流程只是單次採買、每週儲藏室提醒或快速的補貨,瀏覽器型範本可以完全不需要任何設定就完成工作。

如何使用線上購物清單範本

  1. 在瀏覽器中開啟 線上購物清單 工具。
  2. 在輸入欄位中輸入項目名稱。名稱會經過修剪,內部的連續空白會被壓縮為單一一個一般空格。
  3. 從下拉選單中八個介面選項裡挑選一個分類。
  4. 點擊「新增」將該列加入清單末端。如果名稱為空、超過 80 個字碼點、在不區分大小寫的比對中已存在,或搭配的分類不在白名單中,範本會回傳錯誤而不是將其新增。
  5. 購物時,輕點您從架上取下之項目旁的核取方塊,將其切換為已購買。
  6. 若要移除您不再需要的單一項目,請使用該列的「移除」控制項。
  7. 購物結束後,點擊「清除已購買」以一次移除所有已勾選的列,同時保留未勾選的列在其原本的順序中。
  8. 點擊「複製清單」將精確的檢查表傳送到您的剪貼簿,然後貼上到備忘錄應用程式、傳給家庭成員的訊息或電子郵件草稿中。

範本中的八個分類

範本預設提供一組限定的八個介面分類。它們是用來整理購物清單的人機互動選擇,而非營養標準或商店分類法,當產品不符合這份簡易清單時,Other 永遠可供使用。

分類典型用途何時應改選 Other
Produce(農產品)新鮮水果、新鮮蔬菜、新鮮香草冷凍或罐裝農產品
Dairy(乳製品)牛奶、起司、優格、奶油存放於儲藏室架上的乳製品替代品
Bakery(烘焙食品)麵包、餐包、玉米餅、新鮮烘焙產品常溫保存的餅乾,這類應歸於 Pantry
Meat(肉類)新鮮肉品、熟食肉品、包裝魚類冷凍保存的植物基肉類替代品
Pantry(儲藏室食品)罐頭食品、乾燥義大利麵、米、醬料、油品、香料以冷藏方式購買但不屬於其他分類的項目
Frozen(冷凍食品)冷凍餐點、冷凍蔬菜、冰淇淋您打算當天就食用的項目
Household(家居用品)清潔用品、紙類用品、盥洗用品任何可食用物品,即使它們放在同一個走道上
Other(其他)任何不符合上述七個分類的項目保留作為最終歸類選項

為相關項目選擇相同的分類,可以讓您在按照走動順序由上到下瀏覽範本時更輕鬆,但範本本身不會依照分類來排序或重新分組各列。您看到的順序就是您新增的順序。

重複保護機制如何處理項目名稱

重複偵測是範本強制執行的最具體行為之一。候選名稱在與已儲存清單比對之前會先經過正規化,通過之後才會接受新增該列。正規化代表修剪前後空白字元,並將任何內部的連續空白字元壓縮為一個一般空格。比較本身不區分大小寫,因此 Milk、milk、MILK,以及一個不慎出現的「 milk 」都會折疊為同一個識別字串,第二次新增時會明確回傳錯誤,而不是產生一個視覺上令人困惑的重複列。

範本刻意不做的事同樣值得了解。它不會合併數量、推測品牌,或將相關名稱視為同一個項目。Apple 與 apples 是兩個獨立的項目,因為範本是一份有限制的檢查清單,而不是會猜測您意思的購物助理。如果您真的希望清單中同時有 apple 和 apples,請將它們新增為兩個獨立的列,只要每個名稱在正規化後是唯一的,範本就會接受這兩項。

每個已儲存的列都包含一個瀏覽器產生的識別碼、一個使用者提供的名稱、一個介面分類,以及一個已購買旗標。勾選一個列只會變更其已購買旗標,而這個單一屬性是核取方塊切換唯一會修改的內容。「移除」會刪除選取的單一列。「清除已購買」會移除所有已勾選的列,並保留未勾選的列在其現有順序中。

儲存限制與瀏覽器本機行為

範本最多容納 100 個不重複的列,而項目名稱的長度可以從 1 到 80 個 Unicode 字碼點。這些限制能讓本機儲存空間的寫入、剪貼簿輸出以及行動裝置互動保持穩定可預期。儲存的值會存放在一個與來源綁定、附帶版本編號的本機儲存空間鍵之下,因此頁面可以偵測到較舊的或無關的已儲存物件。載入時,剖析器只接受結構有效的列陣列,拒絕超過 100 筆的儲存項目,並捨棄任何格式錯誤的列。無效的 JSON 會回傳空白清單,而不是讓頁面當機或信任任意儲存的物件。

瀏覽器本機儲存雖然方便,但並非備份或同步服務。清除網站資料、使用私密瀏覽視窗、切換瀏覽器、更換裝置,或讓瀏覽器清理政策執行,都可能完全移除這份清單。範本沒有雲端還原、沒有分享連結、沒有多人編輯、沒有登入、沒有通知,也沒有跨裝置同步。請將它視為單次購物行程、儲藏室提醒、家居用品補貨,或快速記錄工作階段的暫時性檢查表。請勿將密碼、付款資訊、醫療細節或其他敏感資料放入瀏覽器儲存空間,並請記住,任何能存取同一個瀏覽器設定檔的人都有可能查看本機儲存的項目。

範本產生的剪貼簿格式

「複製清單」會將每個項目格式化為一行。未勾選的列以 [ ] 開頭,已勾選的列以 [x] 開頭,所選的分類會接在一個長破折號之後。在部分採買後,一個包含三列的範本被複製時可能看起來像這樣:

  • [ ] 菠菜 — Produce(農產品)
  • [x] 全脂牛奶 — Dairy(乳製品)
  • [ ] 酸種麵包 — Bakery(烘焙食品)

剪貼簿的寫入透過標準的瀏覽器剪貼簿 API 進行,且成功指示只會在瀏覽器確認寫入後才會出現,而不是採取樂觀(optimistic)方式提前顯示。如果瀏覽器拒絕剪貼簿權限,頁面會告訴訪客手動選取可見的清單並自行複製。這讓匯出內容在備忘錄應用程式、電子郵件草稿或簡訊中都能保持可讀性,也讓任何稍後讀取這份檢查表的腳本都能獲得可預期的結果。

範本中的分類與順序並不提供飲食、過敏、健康、預算或食品安全方面的指引。範本只記錄訪客所選擇的文字與狀態。請在商店中自行獨立核對標籤、價格、保存需求與個人需求。

如需更深入的說明,請參閱 特殊字元:從單一清單批次複製與貼上