線上購物清單是一份數位清單,您可以在瀏覽器的分頁中建立,用來規劃一次購物行程而不需要紙本,而 線上購物清單 工具會將整份清單保存在瀏覽器的 localStorage 中,提供八個介面分類、不分大小寫的重複保護、購買切換開關,以及一個剪貼簿匯出功能,每次剛好輸出一行一個品項。內容不會上傳到任何伺服器、不需要註冊帳號,只要瀏覽器設定檔不變,重新整理頁面後清單依然會留存。這個工具專為單次購物行程設計:開啟它、輸入品項、在店內勾選已購買的項目,回家後再清除已購買的列即可。
對於不想再多一個帳號、安裝 App,或進行家庭共享同步的購物者來說,一個內嵌於頁面中的小型清單就能滿足日常需求:每週一次的超市採買、儲藏室補貨,或下班回家路上的快速補給。因為清單存放在您正在使用的瀏覽器設定檔中,因此內容會保持私密;而唯一的輸出——一份複製後的清單——只會出現在您貼上的地方。

線上購物清單工具實際的功能
線上購物清單是一份受限於瀏覽器的清單,專供行程規劃使用。您輸入一個品項,從八個分類中選擇一個,然後將其加入。每列有四種狀態:您提供的名稱、一個分類標籤、一個已購買旗標,以及一個由瀏覽器產生的識別碼。清單會在頁面上呈現,您勾選的列會顯示為已購買,您移除的列則會立即消失。完整的清單——名稱、分類、已購買旗標,以及瀏覽器產生的識別碼——會在每次操作時序列化到一個有版本控制的 localStorage 鍵,因此重新整理並不會遺失資料。
這個工具沒有隱藏的排序功能、沒有分類重新編組、沒有價格計算、沒有數量運算、沒有推薦引擎,也沒有自動庫存行為。品項會保持您當初新增的順序。這種可預測的行為正是重點:清單會完整保留您輸入的內容與您選擇的結構。
新增品項與選擇分類
新增一列是一個包含三個欄位的動作:名稱、分類下拉選單,以及新增按鈕。名稱會去除前後的空白字元,內部連續的空白會被壓縮成一個普通空格,因此「Olive oil」中不慎多打的雙空格,仍會儲存為「Olive oil」。名稱長度必須介於 1 到 80 個 Unicode 碼點之間,且在標準化處理後不得為空。分類會從一組固定的八個介面標籤中選取:
| 分類 | 常見用途 |
|---|---|
| 農產品 | 新鮮水果與蔬菜 |
| 乳製品 | 牛奶、優格、奶油、起司 |
| 烘焙類 | 麵包、餐包、烘焙食品 |
| 肉類 | 新鮮與包裝的蛋白質 |
| 儲藏室食材 | 罐頭食品、乾貨、油品、調味料 |
| 冷凍類 | 冷凍熟食、蔬菜、冰淇淋 |
| 日用品 | 清潔用品、紙類、洗衣用品、個人護理 |
| 其他 | 這個簡易分類中無法歸類的項目 |
這些分類是一種介面整理方式的選擇,而非營養標準、商店分類法,也不能保證每項產品都屬於該分類所在的走道。當某列無法歸類時請使用「其他」,清單的其他部分仍會以可預測的方式呈現。
如何建立並使用您的清單
- 在瀏覽器中開啟線上購物清單工具。
- 在輸入欄位中輸入品項名稱——例如「Whole wheat bread」或「Eggs (large)」。
- 從下拉選單中選擇一個與您在店內查看位置相符的分類。
- 點擊「新增」將該列加入清單中。名稱重複時會回傳錯誤,而不會出現兩列。
- 購物時,每個放入購物車的品項,請勾選其旁邊的方塊。
- 對不小心新增的單列使用「移除」,或使用「清除已購買項目」一次刪除所有已勾選的列。
- 出門前,點擊「複製清單」並將格式化後的清單貼到筆記應用程式、訊息中,或列印出來。
「清除已購買項目」動作只會移除已勾選的列;未勾選的列會保持原本的順序。「移除」會精準刪除一個選定的列。這兩個動作都不會影響剩餘列的名稱、分類或順序。
重複保護與品項限制
線上購物清單中的重複偵測是不分大小寫的,因此「Milk」和「milk」會被視為同一個品項。第二次嘗試新增時會回傳明確的錯誤,而不會產生兩個令人困惑的列。這個工具不會合併數量、推測品牌,也不會猜測「apple」和「apples」是同一個名稱——這些是不同的詞彙,工具會尊重這種區別。規則很簡單:拼字相同(不論大小寫)且在標準化後空白也相同,即視為重複;其他情況則視為新的一列。
兩個嚴格的邊界讓畫面呈現、localStorage 寫入與剪貼簿輸出都能保持可預測。一份清單最多可容納 100 個不重複的品項,單一名稱最長可達 80 個 Unicode 碼點。空名稱、超過長度限制的名稱、重複名稱,或無效的分類會產生錯誤,而不會更動已儲存的內容——在您修正輸入的過程中,現有的清單不會受到影響。
這個工具會處理與不會處理的事項
事先了解界線,能避免在店內產生混淆。下表比較了工具執行的動作,以及刻意保留給其他應用程式、紙本或您自行判斷的動作。
| 工具內建功能 | 刻意未包含的功能 |
|---|---|
| 新增最多 100 個具名品項,每個各屬一個分類 | 數量統計或單位換算 |
| 不分大小寫的重複拒絕機制 | 品牌推測或產品建議 |
| 每列獨立的已購買切換開關 | 價格總計或預算追蹤 |
| 移除單一列 | 依走道排序或分組 |
| 一次清除所有已購買的列 | 跨裝置同步或分享連結 |
| 精準的剪貼簿匯出,每行一個品項 | 帳號登入或雲端備份 |
| 在同一瀏覽器設定檔中的 localStorage 持續保存 | 通知或提醒 |
將清單複製到您的剪貼簿
「複製清單」按鈕會將儲存的列格式化為一個清晰、可直接貼上的區塊。未勾選的列以「[ ]」開頭,已勾選的列以「[x]」開頭,所選的分類會在長破折號之後顯示在同一行。一列已購買的乳製品牛奶看起來就像「[x] Milk — Dairy」。每行一個品項的設計,讓輸出內容在任何筆記應用程式、聊天軟體或列印頁面上都能輕鬆瀏覽。
成功訊息只有在瀏覽器確認剪貼簿寫入後才會出現,該操作使用的是標準的 Clipboard writeText API。如果瀏覽器拒絕剪貼簿權限,頁面會提示您手動選取可見的清單內容,因此即使程式化複製被阻擋,這些列仍然可以取得。
瀏覽器儲存機制如何讓清單保持可用
清單會儲存到目前瀏覽器設定檔中一個有版本控制的 localStorage 鍵。localStorage 是內建於每個現代瀏覽器中的小型鍵值儲存空間,而這個工具遵循網頁平台所記載的相同儲存規範:localStorage 在頁面重新整理之間會持續保存,但範圍限於同一來源與瀏覽器設定檔。載入時的解析器只接受結構上有效的列組成的陣列,會拒絕超過 100 筆的儲存項目,並捨棄格式錯誤的列,因此損壞的值絕對不會讓頁面當機。遇到無效的 JSON 時,會回退為空清單,而不會信任任意儲存的物件。
由於儲存空間是瀏覽器本機的,幾個日常操作可能會移除這份清單:清除網站資料、切換到無痕或私密模式、切換到不同的瀏覽器、切換裝置,或執行瀏覽器的清理政策。這個工具沒有雲端還原、沒有分享連結、沒有多人編輯、沒有登入、沒有通知,也沒有跨裝置同步。請將這份清單視為單次行程的便利工具——規劃、採買、清除已購買項目,然後重新開始。
這個工具適用於哪些使用情境
這份清單適用於單次購物行程、儲藏室提醒、家庭用品採買,或任何您原本會在紙上匆忙記下的快速清單。它同樣適用於不希望共享的情境,例如您不想推送到雲端帳號、或不想與其他家庭成員分享的個人購物清單。介面保持安靜且可預測:您輸入的名稱、您選擇的分類、您切換的已購買旗標,以及由您掌控的剪貼簿匯出。
對於任何瀏覽器儲存工具,都應附上幾點注意事項。請勿在清單中放入密碼、付款資訊、醫療細節或其他敏感資料。任何能存取同一瀏覽器設定檔的使用者,都有可能查看本機儲存的內容。您看到的分類與順序並不提供飲食、過敏、健康、預算或食品安全方面的指引——請自行核對標籤、價格、儲存需求與個人需求,因為這個工具只會記錄您所選擇的文字與狀態。
為您的下一次行程做好整合準備
從一份全新的清單開始,在整個週間想到品項時陸續新增,在遠低於 100 個品項上限前停止新增,因為單次商店採買通常不會達到該限制。在店內時,每放入購物車一項就勾選該列,並在開始時複製一次清單,讓備份保留在剪貼簿中,以備頁面意外關閉。回到家後,使用一次動作清除已購買項目,未勾選的列便準備好供下次行程使用。
localStorage 持續保存、八個介面分類、不分大小寫的重複拒絕機制,以及精準的剪貼簿匯出,這些功能的組合就是全部的功能範圍——刻意維持小巧、行為可預設,且預設為私密。對於想要一份不需要電子郵件地址的線上購物清單的購物者而言,這樣的範疇正是重點所在。