線上購物清單是一份數位清單,您可以在瀏覽器的分頁中建立,用來規劃一次購物行程而不需要紙本,而 線上購物清單 工具會將整份清單保存在瀏覽器的 localStorage 中,提供八個介面分類、不分大小寫的重複保護、購買切換開關,以及一個剪貼簿匯出功能,每次剛好輸出一行一個品項。內容不會上傳到任何伺服器、不需要註冊帳號,只要瀏覽器設定檔不變,重新整理頁面後清單依然會留存。這個工具專為單次購物行程設計:開啟它、輸入品項、在店內勾選已購買的項目,回家後再清除已購買的列即可。

對於不想再多一個帳號、安裝 App,或進行家庭共享同步的購物者來說,一個內嵌於頁面中的小型清單就能滿足日常需求:每週一次的超市採買、儲藏室補貨,或下班回家路上的快速補給。因為清單存放在您正在使用的瀏覽器設定檔中,因此內容會保持私密;而唯一的輸出——一份複製後的清單——只會出現在您貼上的地方。

online grocery list
線上購物清單:一份由瀏覽器儲存的私密清單

線上購物清單工具實際的功能

線上購物清單是一份受限於瀏覽器的清單,專供行程規劃使用。您輸入一個品項,從八個分類中選擇一個,然後將其加入。每列有四種狀態:您提供的名稱、一個分類標籤、一個已購買旗標,以及一個由瀏覽器產生的識別碼。清單會在頁面上呈現,您勾選的列會顯示為已購買,您移除的列則會立即消失。完整的清單——名稱、分類、已購買旗標,以及瀏覽器產生的識別碼——會在每次操作時序列化到一個有版本控制的 localStorage 鍵,因此重新整理並不會遺失資料。

這個工具沒有隱藏的排序功能、沒有分類重新編組、沒有價格計算、沒有數量運算、沒有推薦引擎,也沒有自動庫存行為。品項會保持您當初新增的順序。這種可預測的行為正是重點:清單會完整保留您輸入的內容與您選擇的結構。

新增品項與選擇分類

新增一列是一個包含三個欄位的動作:名稱、分類下拉選單,以及新增按鈕。名稱會去除前後的空白字元,內部連續的空白會被壓縮成一個普通空格,因此「Olive oil」中不慎多打的雙空格,仍會儲存為「Olive oil」。名稱長度必須介於 1 到 80 個 Unicode 碼點之間,且在標準化處理後不得為空。分類會從一組固定的八個介面標籤中選取:

分類常見用途
農產品新鮮水果與蔬菜
乳製品牛奶、優格、奶油、起司
烘焙類麵包、餐包、烘焙食品
肉類新鮮與包裝的蛋白質
儲藏室食材罐頭食品、乾貨、油品、調味料
冷凍類冷凍熟食、蔬菜、冰淇淋
日用品清潔用品、紙類、洗衣用品、個人護理
其他這個簡易分類中無法歸類的項目

這些分類是一種介面整理方式的選擇,而非營養標準、商店分類法,也不能保證每項產品都屬於該分類所在的走道。當某列無法歸類時請使用「其他」,清單的其他部分仍會以可預測的方式呈現。

如何建立並使用您的清單

  1. 在瀏覽器中開啟線上購物清單工具。
  2. 在輸入欄位中輸入品項名稱——例如「Whole wheat bread」或「Eggs (large)」。
  3. 從下拉選單中選擇一個與您在店內查看位置相符的分類。
  4. 點擊「新增」將該列加入清單中。名稱重複時會回傳錯誤,而不會出現兩列。
  5. 購物時,每個放入購物車的品項,請勾選其旁邊的方塊。
  6. 對不小心新增的單列使用「移除」,或使用「清除已購買項目」一次刪除所有已勾選的列。
  7. 出門前,點擊「複製清單」並將格式化後的清單貼到筆記應用程式、訊息中,或列印出來。

「清除已購買項目」動作只會移除已勾選的列;未勾選的列會保持原本的順序。「移除」會精準刪除一個選定的列。這兩個動作都不會影響剩餘列的名稱、分類或順序。

重複保護與品項限制

線上購物清單中的重複偵測是不分大小寫的,因此「Milk」和「milk」會被視為同一個品項。第二次嘗試新增時會回傳明確的錯誤,而不會產生兩個令人困惑的列。這個工具不會合併數量、推測品牌,也不會猜測「apple」和「apples」是同一個名稱——這些是不同的詞彙,工具會尊重這種區別。規則很簡單:拼字相同(不論大小寫)且在標準化後空白也相同,即視為重複;其他情況則視為新的一列。

兩個嚴格的邊界讓畫面呈現、localStorage 寫入與剪貼簿輸出都能保持可預測。一份清單最多可容納 100 個不重複的品項,單一名稱最長可達 80 個 Unicode 碼點。空名稱、超過長度限制的名稱、重複名稱,或無效的分類會產生錯誤,而不會更動已儲存的內容——在您修正輸入的過程中,現有的清單不會受到影響。

這個工具會處理與不會處理的事項

事先了解界線,能避免在店內產生混淆。下表比較了工具執行的動作,以及刻意保留給其他應用程式、紙本或您自行判斷的動作。

工具內建功能刻意未包含的功能
新增最多 100 個具名品項,每個各屬一個分類數量統計或單位換算
不分大小寫的重複拒絕機制品牌推測或產品建議
每列獨立的已購買切換開關價格總計或預算追蹤
移除單一列依走道排序或分組
一次清除所有已購買的列跨裝置同步或分享連結
精準的剪貼簿匯出,每行一個品項帳號登入或雲端備份
在同一瀏覽器設定檔中的 localStorage 持續保存通知或提醒

將清單複製到您的剪貼簿

「複製清單」按鈕會將儲存的列格式化為一個清晰、可直接貼上的區塊。未勾選的列以「[ ]」開頭,已勾選的列以「[x]」開頭,所選的分類會在長破折號之後顯示在同一行。一列已購買的乳製品牛奶看起來就像「[x] Milk — Dairy」。每行一個品項的設計,讓輸出內容在任何筆記應用程式、聊天軟體或列印頁面上都能輕鬆瀏覽。

成功訊息只有在瀏覽器確認剪貼簿寫入後才會出現,該操作使用的是標準的 Clipboard writeText API。如果瀏覽器拒絕剪貼簿權限,頁面會提示您手動選取可見的清單內容,因此即使程式化複製被阻擋,這些列仍然可以取得。

瀏覽器儲存機制如何讓清單保持可用

清單會儲存到目前瀏覽器設定檔中一個有版本控制的 localStorage 鍵。localStorage 是內建於每個現代瀏覽器中的小型鍵值儲存空間,而這個工具遵循網頁平台所記載的相同儲存規範:localStorage 在頁面重新整理之間會持續保存,但範圍限於同一來源與瀏覽器設定檔。載入時的解析器只接受結構上有效的列組成的陣列,會拒絕超過 100 筆的儲存項目,並捨棄格式錯誤的列,因此損壞的值絕對不會讓頁面當機。遇到無效的 JSON 時,會回退為空清單,而不會信任任意儲存的物件。

由於儲存空間是瀏覽器本機的,幾個日常操作可能會移除這份清單:清除網站資料、切換到無痕或私密模式、切換到不同的瀏覽器、切換裝置,或執行瀏覽器的清理政策。這個工具沒有雲端還原、沒有分享連結、沒有多人編輯、沒有登入、沒有通知,也沒有跨裝置同步。請將這份清單視為單次行程的便利工具——規劃、採買、清除已購買項目,然後重新開始。

這個工具適用於哪些使用情境

這份清單適用於單次購物行程、儲藏室提醒、家庭用品採買,或任何您原本會在紙上匆忙記下的快速清單。它同樣適用於不希望共享的情境,例如您不想推送到雲端帳號、或不想與其他家庭成員分享的個人購物清單。介面保持安靜且可預測:您輸入的名稱、您選擇的分類、您切換的已購買旗標,以及由您掌控的剪貼簿匯出。

對於任何瀏覽器儲存工具,都應附上幾點注意事項。請勿在清單中放入密碼、付款資訊、醫療細節或其他敏感資料。任何能存取同一瀏覽器設定檔的使用者,都有可能查看本機儲存的內容。您看到的分類與順序並不提供飲食、過敏、健康、預算或食品安全方面的指引——請自行核對標籤、價格、儲存需求與個人需求,因為這個工具只會記錄您所選擇的文字與狀態。

為您的下一次行程做好整合準備

從一份全新的清單開始,在整個週間想到品項時陸續新增,在遠低於 100 個品項上限前停止新增,因為單次商店採買通常不會達到該限制。在店內時,每放入購物車一項就勾選該列,並在開始時複製一次清單,讓備份保留在剪貼簿中,以備頁面意外關閉。回到家後,使用一次動作清除已購買項目,未勾選的列便準備好供下次行程使用。

localStorage 持續保存、八個介面分類、不分大小寫的重複拒絕機制,以及精準的剪貼簿匯出,這些功能的組合就是全部的功能範圍——刻意維持小巧、行為可預設,且預設為私密。對於想要一份不需要電子郵件地址的線上購物清單的購物者而言,這樣的範疇正是重點所在。

相關閱讀:如何在不使用公式的情況下於 Google 試算表中隨機排序清單。

相關閱讀:如何在不使用公式的情況下比對兩份 Excel 清單中的重複項目。