線上 grocery list maker（線上購物清單產生器）是一種覽器工具，可讓你新增、分類、標示為已購買並匯出購物清單，而無須註冊帳號。Online Grocery List maker 會將每一個項目儲存在本機的版本化 localStorage 索引鍵中，因此清單會跟著當初建立它的裝置走，絕不會上傳到遠端伺服器。每個項目就是一個名稱，搭配八個有限類別中的其中一個、一個已購買旗標，以及一個由瀏覽器產生的識別碼；一份清單最多只能容納 100 個獨立項目，超過後工具會拒絕繼續新增。名稱會經過修剪，內部連續空白會被壓縮成單一的一般空格，且重複偵測不區分大小寫，因此第二次輸入的 "Milk" 即使打成 "milk"，也會明確產生錯誤，而不會冒出兩列令人困惑的記錄。這個產生器不會合併數量、不會推測品牌，也不會自行判斷 "apple" 和 "apples" 是同一個項目；它會原封不動地記錄訪客所輸入的文字與狀態。這讓它無論是作為單趟購物、儲藏室提醒、家庭用品採買或快速清單都很穩定可靠，但也代表訪客必須自行負責備份任何想跨裝置保存的內容。
線上 grocery list maker 實際上能做什麼
grocery list maker 的工作很單純：接收你需要的項目、整理它們，並在店內幫你逐項完成。基於瀏覽器的版本不需要帳號、不需要安裝，也不需要連線到遠端資料庫就能做到這些。Online Grocery List maker 會把整份運作中的清單保留在當初建立它的那台裝置上，這代表頁面是從本機載入、每一列資料絕不會同步給第三方，而且在你把「Eggs」加進購物籃之前，不會有任何登入畫面擋在前面。
核心介面刻意保持精簡。你可以新增一個項目、從固定選單中為它指派一個類別、切換其已購買狀態、單獨刪除它、一次清除所有已購買的項目，或把整份清單以可讀的格式複製到剪貼簿。沒有價格欄位、沒有數量運算、沒有飲食篩選、沒有共用購物車，也沒有自動庫存行為。你所看到的這些類別只是一種介面上的分類選擇，既不是營養標準，也不是賣場分類法，更不代表所有商品都應該歸入工具所放置的那個分類中。當訪客需要不同的標時，可以退而使用內建的「Other」類別；它在切換、除、匯出和儲存方面的行為與其他七個完全相同。
如何逐步建立你的購物清單
- 開啟 Online Grocery List maker，將第一個項目輸入到名稱欄位。請將名稱長度控制在 1 到 80 個 Unicode 碼位之間；空白的名稱或過長的名稱會在不改變已儲存清單的情況下回傳錯誤。
- 從八個選項的選單中挑選一個類別（Produce、Dairy、Bakery、Meat、Pantry、Frozen、Household 或 Other）。這個類別是一個受限的單一標，而不是多重標記系統。
- 送出該項目。產生器會先修剪前後空白，再將內部連續空白折疊成一個一般空格，然後驗證名稱是否非空白、長度未超限，以及忽略大小寫後是否唯一。
- 為每一個項目重複以上步驟，直到購物清單建立完成。清單最多接受 100 個獨立項目；第 101 次送出會被拒絕。
- 購物進行中，每撿起一項，就在該列上勾選 checkbox。這個切換只會變更該列的已購買旗標；它不會搬移該列、不會重新命名，也不會改變其類別。
- 使用每列專屬的刪除控制項來移除任何單一項目。若要一次清除所有已勾選的項目，請使用「clear purchased」動作；未勾選的項目則會保留在原本的順序中。
- 當你準備好要分享、列印或貼上時，請複製這份清單。未勾選的項目以 [ ] 開頭，已勾選的項目以 [x] 開頭，並在同行以 em dash 接著所選擇的類別。
八個類別及其使用方式
每個項目只會被指派八個類別中的其中一個，並且同一個類別會在購買、刪除與匯出的過程中一直跟著這個項目。下面的清單說明了在這項工具中每個標籤預設代表的意義。下列內容並非關於營養、賣場動線，或特定零售商如何分類商品的具體聲明；它們只是一種介面上的分類選擇，只要這套簡單的分類不合用，訪客隨時可以用 Other 來覆寫。
| Category | Intended Use Inside the Tool |
|---|---|
| Produce | Fresh fruits and vegetables the visitor chooses to label this way |
| Dairy | Milk, yogurt, cheese, butter, and similar chilled items |
| Bakery | Bread, rolls, tortillas, and baked goods |
| Meat | Fresh and packaged animal proteins |
| Pantry | Dry and canned goods, oils, sauces, and cooking staples |
| Frozen | Frozen meals, vegetables, and desserts |
| Household | Cleaning supplies, paper goods, and non-food essentials |
| Other | Anything the simple set does not fit, including pet supplies and personal care |
如果這些標籤與你正在採購的東西不相符，請使用 Other。在切換、刪除、匯出與儲存方面，Other 中的項目與其他任何類別中的項目行為相同。這個標籤只是給訪客的排序提示，並不保證賣場會把該商品放在同一個走道上。
重複防護、購買切換與清理
這套產生器默默提供的安全機制，是不區分大小寫的重複偵測以及嚴格的長度限制。空白名稱、超過 80 個 Unicode 碼位的名稱、重複的識別碼、重複的名稱，以及無效的類別，都會在不變更已儲存清單的情況下產生錯誤。這代表一個錯字、自動校正的意外，或 "Eggs " 結尾多出的一個空白，都不會悄悄毀掉你之前輸入的內容。錯誤訊息是明確的，而原本的清單會原封不動地留在原地，因此被拒絕的送出動作絕不會刪除或重寫已經儲存的內容。
一旦項目就位，工作流程就是切換與清理。把一列標示為已購買只會翻轉它的已購買旗標。刪除一列只會刪除那一個項目，其他每一列及其勾選狀態都保持不變。這套產生器絕不會悄悄重新排序、不會依類別重新分組，也不會重新計算任何東西；你所看到的列就是所儲存的列，順序就是你當初新增的順序。「Clear purchased」會移除所有已勾選的列，並保留未勾選的列在原本的順序中，這是在多次採買之間快速重置清單、又不必從頭重建的好方法。
匯出購物清單而不遺失細節
剪貼簿匯出是這套產生器在畫面與你其他購物流程之間的橋樑。每行一個項目，未勾選為 [ ]、已勾選為 [x]，接著在 em dash 之後放上類別標。這個精確的格式意味著匯出內容是螢幕上所顯示內容逐行的忠實拷貝，而不是經過摘要或美化的版本。如果你把它貼到筆記應用程式、聊天視窗或紙本清單中，每一個 checkbox 的狀態都會原樣保留。
根據 MDN Clipboard writeText reference 的說明，一次成功的剪貼簿寫入動作需要瀏覽器在安全環境（secure context）中授予權限，而這套產生器會把這個授權確認視為必要前提，而不是假設寫入一定成功。如果瀏覽器拒絕授予剪貼簿權限，這套產生器不會悶不吭聲地失敗，也不會假裝成功。它會告訴訪客手動選取畫面上可見的清單，以確保沒有任何內容遺失。這裡沒有下載按鈕、沒有 email 匯出，也沒有分享連結；剪貼簿是把文字移出這套工具的唯一內建方式。
覽器儲存空間並不等於備份
這套產生器所儲存的一切，都保存在目前瀏覽器設定檔上一個版本化的 localStorage 索引鍵中。根據 MDN Window localStorage reference 的說明，localStorage 雖然方便用於少量、同步的用戶端持久化儲存，但它受限於瀏覽器、設定檔與裝置本身。清除網站資料、開啟私視窗、切換到不同的瀏覽器、更換裝置，或讓清理政策自動執行，都可能會把這份清單移除掉。這套工具沒有雲端還原、沒有分享連結、沒有多人編輯、沒有登入機制、沒有通知功能，也沒有跨裝置同步。
請把這套產生器視為單次採買的輔助工具，而非長期的記錄本。它適合用在單趟購物、儲藏室提醒、家庭用品採買，或是你會在其他地方另行備份的快速清單。請勿把密碼、付款資訊、醫療細節或其他敏感資料放進已儲存的清單中，因為任何能存取同一個瀏覽器設定檔的人，都有可能看到本機儲存的項目。這些項目的類別與順序並不構成飲食建議、過敏警訊、健康指引、預算規劃或食品安全方面的保證，因此到了賣場之後，標籤、價格、儲存條件與個人需求仍需要另行獨立確認。
如果你正在權衡各種選項，Lenny Face Keyboard: Build (͡° ͜ʖ ͡°) From Unicode 對此有詳細說明。
如果你正在權衡各種選項，Randomize a Sheets List the Fair Way 對此有詳細說明。