今天是第二十天我們可以寫一個javascript資訊盤點網頁程式管理系統，以下是我的程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inventory Management System</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>資訊盤點管理系統</h1>
<div class="container">
<form id="item-form">
<label for="item-name">物品名稱:</label>
<input type="text" id="item-name" required>
<label for="item-quantity">數量:</label>
<input type="number" id="item-quantity" required>
<button type="submit">新增物品</button>
</form>
<ul id="item-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
ul {
list-style: none;
padding: 0;
}
li {
background: #e2e2e2;
margin: 10px 0;
padding: 10px;
display: flex;
justify-content: space-between;
}
button {
background-color: #5cb85c;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
button:hover {
background-color: #4cae4c;
}
// 取得 UI 元素
const itemForm = document.getElementById('item-form');
const itemNameInput = document.getElementById('item-name');
const itemQuantityInput = document.getElementById('item-quantity');
const itemList = document.getElementById('item-list');
// 從本地儲存讀取物品清單
let items = JSON.parse(localStorage.getItem('inventoryItems')) || [];
// 初始化物品清單
function init() {
itemList.innerHTML = '';
items.forEach(item => {
addItemToDOM(item);
});
}
// 新增物品到 DOM 並更新本地儲存
function addItemToDOM(item) {
const li = document.createElement('li');
li.innerHTML = `${item.name} - 數量: ${item.quantity} <button class="delete-btn">刪除</button>`;
li.querySelector('.delete-btn').addEventListener('click', () => {
removeItem(item.name);
});
itemList.appendChild(li);
}
// 新增物品
itemForm.addEventListener('submit', (e) => {
e.preventDefault();
const itemName = itemNameInput.value;
const itemQuantity = itemQuantityInput.value;
if (itemName === '' || itemQuantity === '') {
alert('請填寫所有欄位');
return;
}
const newItem = {
name: itemName,
quantity: itemQuantity
};
items.push(newItem);
localStorage.setItem('inventoryItems', JSON.stringify(items));
addItemToDOM(newItem);
itemNameInput.value = '';
itemQuantityInput.value = '';
});
// 刪除物品
function removeItem(itemName) {
items = items.filter(item => item.name !== itemName);
localStorage.setItem('inventoryItems', JSON.stringify(items));
init();
}
// 初始化應用
init();
HTML：提供物品名稱和數量的輸入欄位，還有一個顯示物品清單的區域。CSS：設置了一些簡單的樣式來讓頁面更美觀。JavaScript：
LocalStorage 儲存物品清單，讓資料不會在頁面重新整理後丟失。在程式開始的時候，我們使用 document.getElementById() 方法來取得 HTML 中的元素，這些是頁面上表單和顯示物品清單的區塊。
const itemForm = document.getElementById('item-form');
const itemNameInput = document.getElementById('item-name');
const itemQuantityInput = document.getElementById('item-quantity');
const itemList = document.getElementById('item-list');
這段程式碼做的是：
itemForm: 對應 <form> 表單元素。itemNameInput: 對應輸入物品名稱的 <input>。itemQuantityInput: 對應輸入物品數量的 <input>。itemList: 對應用來顯示物品清單的 <ul> 元素。這樣就可以在 JavaScript 中操作這些元素。
為了讓物品清單即使頁面重新整理後依然存在，我們使用瀏覽器的 LocalStorage 儲存和讀取資料。
let items = JSON.parse(localStorage.getItem('inventoryItems')) || [];
localStorage.getItem('inventoryItems')：從 LocalStorage 中取得名稱為 'inventoryItems' 的資料。如果這個名稱對應的資料存在，它會是一個字串格式。JSON.parse()：因為從 LocalStorage 中讀取的資料是字串格式，這個函數會將字串轉換成 JavaScript 可以操作的陣列或物件。如果本地沒有資料（例如使用者第一次開啟網頁時），則會返回空陣列 []。當頁面載入時，我們會呼叫 init() 函數來初始化頁面，這個函數會從 items 陣列中將儲存的物品顯示出來。
function init() {
itemList.innerHTML = ''; // 清空物品列表
items.forEach(item => {
addItemToDOM(item); // 將每一個物品顯示在頁面上
});
}
itemList.innerHTML = '';：清空 ul 裡面現有的物品項目，確保重新顯示最新資料。items.forEach()：這個方法會遍歷 items 陣列中的每個物品，並且將每個物品都透過 addItemToDOM() 函數顯示到頁面上。這個函數負責將物品新增到網頁的清單區域（<ul> 內），並在每個物品旁顯示一個 "刪除" 按鈕。
function addItemToDOM(item) {
const li = document.createElement('li'); // 建立一個 <li> 元素
li.innerHTML = `${item.name} - 數量: ${item.quantity} <button class="delete-btn">刪除</button>`;
li.querySelector('.delete-btn').addEventListener('click', () => {
removeItem(item.name); // 為刪除按鈕加上刪除功能
});
itemList.appendChild(li); // 將 <li> 加到 <ul> 清單中
}
document.createElement('li')：建立一個新的 <li> 元素來顯示每個物品。li.innerHTML：將物品名稱和數量用文字格式填入 li，並加上一個刪除按鈕。li.querySelector('.delete-btn').addEventListener('click', ... )：為刪除按鈕添加一個事件監聽器，當使用者點擊按鈕時，會執行 removeItem(item.name) 函數，進行刪除操作。itemList.appendChild(li)：將這個建立的 li 元素加到 ul 中，讓它顯示在頁面上。當使用者在表單中輸入物品名稱與數量，並按下 "新增物品" 按鈕時，會觸發 submit 事件。這段程式碼會將新的物品加入到清單中，並更新本地儲存。
itemForm.addEventListener('submit', (e) => {
e.preventDefault(); // 阻止表單的預設行為（頁面重新整理）
const itemName = itemNameInput.value; // 取得輸入的物品名稱
const itemQuantity = itemQuantityInput.value; // 取得輸入的物品數量
if (itemName === '' || itemQuantity === '') {
alert('請填寫所有欄位');
return; // 若有欄位為空，則彈出提示並結束函數
}
const newItem = {
name: itemName,
quantity: itemQuantity
};
items.push(newItem); // 將新物品加入到物品陣列
localStorage.setItem('inventoryItems', JSON.stringify(items)); // 更新本地儲存
addItemToDOM(newItem); // 將新物品顯示在頁面上
itemNameInput.value = ''; // 清空輸入框
itemQuantityInput.value = ''; // 清空輸入框
});
e.preventDefault()：阻止表單提交時的預設行為（重新整理頁面）。items.push(newItem)：將新物品加入 items 陣列。localStorage.setItem()：將更新後的 items 陣列以字串格式儲存到 LocalStorage。addItemToDOM()：將新物品加入網頁清單顯示。這個函數負責從 items 陣列中刪除物品，並更新本地儲存及頁面顯示。
function removeItem(itemName) {
items = items.filter(item => item.name !== itemName); // 過濾掉不需要的物品
localStorage.setItem('inventoryItems', JSON.stringify(items)); // 更新本地儲存
init(); // 重新初始化頁面顯示
}
items.filter()：過濾掉 items 陣列中名稱與刪除項目相同的物品，並回傳一個新的陣列。localStorage.setItem()：更新 LocalStorage 中儲存的物品清單。init()：重新初始化頁面，清空原本的清單並顯示最新的物品資料。最後，我呼叫 init() 函數來初始化應用，確保當頁面載入時，會顯示已儲存的物品清單。
init();
這個 JavaScript 程式管理了一個簡單的資訊盤點系統，具備以下功能：
LocalStorage，即使重新整理頁面，資料也會保留。
iThome鐵人賽
看影片追技術