JavaScript 用戶數據

JavaScript 可以處理用戶數據，包括獲取、存儲和處理用戶數據。以下是一些使用 JavaScript 處理用戶數據的常見方法。

獲取表單數據

獲取表單數據是處理用戶數據的常見需求。以下是如何使用 JavaScript 獲取表單數據的示例。

<form id="myForm"><label for="name">Name:</label><input type="text" id="name" name="name"><label for="email">Email:</label><input type="email" id="email" name="email"><button>Submit</button></form><script>const form = document.querySelector('#myForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
const name = form.elements['name'].value;
const email = form.elements['email'].value;
console.log(name, email);
});
</script>

存儲用戶數據

JavaScript 可以使用本地存儲機制存儲用戶數據，包括 sessionStorage 和 localStorage。

sessionStorage

sessionStorage 提供了在會話期間存儲和訪問數據的方法。以下是如何使用 sessionStorage 存儲用戶數據的示例。

<button id="save">Save</button><button id="load">Load</button><script>const saveButton = document.querySelector('#save');
const loadButton = document.querySelector('#load');
saveButton.addEventListener('click', function() {
const data = { name: 'Alice', age: 20 };
sessionStorage.setItem('userData', JSON.stringify(data));
});
loadButton.addEventListener('click', function() {
const data = JSON.parse(sessionStorage.getItem('userData'));
console.log(data.name, data.age);
});
</script>

localStorage

localStorage 提供了在瀏覽器關閉后仍然存儲數據的方法。以下是如何使用 localStorage 存儲用戶數據的示例。

<button id="save">Save</button><button id="load">Load</button><script>const saveButton = document.querySelector('#save');
const loadButton = document.querySelector('#load');
saveButton.addEventListener('click', function() {
const data = { name: 'Alice', age: 20 };
localStorage.setItem('userData', JSON.stringify(data));
});
loadButton.addEventListener('click', function() {
const data = JSON.parse(localStorage.getItem('userData'));
console.log(data.name, data.age);
});
</script>

處理用戶數據

JavaScript 可以使用數組和對象處理用戶數據。以下是如何使用 JavaScript 處理用戶數據的示例。

數組

const data = [
{ name: 'Alice', age: 20 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 40 }
];
// 使用 forEach() 遍歷數組
data.forEach(function(item) {
console.log(item.name, item.age);
});
// 使用 filter() 過濾數組
const filteredData = data.filter(function(item) {
return item.age >30;
});
console.log(filteredData);
// 使用 map() 轉換數組
const mappedData = data.map(function(item) {
return item.name;
});
console.log(mappedData);

對象

const data = {
alice: { name: 'Alice', age: 20 },
bob: { name: 'Bob', age: 30 },
charlie: { name: 'Charlie', age: 40 }
};
// 使用 for-in 遍歷對象
for (const key in data) {
console.log(data[key].name, data[key].age);
}
// 使用 Object.keys() 獲取所有鍵
const keys = Object.keys(data);
console.log(keys);
// 使用 Object.values() 獲取所有值
const values = Object.values(data);
console.log(values);
// 使用 Object.entries() 獲取所有鍵值對
const entries = Object.entries(data);
console.log(entries);

JavaScript 在處理用戶數據方面非常靈活，開發者可以根據具體需求使用不同的方法。