Javascript如何設定和取得Cookie?

在 JavaScript 中，可以使用 document.cookie 來設定和取得 Cookie。以下是設定和取得 Cookie 的方法：

---

1. 設定 Cookie

基本語法

javascript

document.cookie = "key=value; expires=date; path=path; domain=domain; secure; samesite=strict";

範例

javascript

// 設定一個簡單的 Cookie
document.cookie = "username=Alice";

// 設定一個有過期時間的 Cookie
document.cookie = "sessionToken=abc123; expires=Fri, 31 Dec 2024 23:59:59 GMT";

// 設定一個有效路徑的 Cookie
document.cookie = "theme=dark; path=/";

// 設定跨域 Cookie (需伺服器支持)
document.cookie = "authToken=xyz456; domain=example.com";

// 設定安全和 SameSite 屬性
document.cookie = "secureData=true; secure; samesite=strict";

---

2. 取得 Cookie

基本語法

javascript

const allCookies = document.cookie;

document.cookie 返回的是一個由分號分隔的字符串，其中包含所有可訪問的 Cookie。

範例

javascript

// 獲取所有 Cookie
console.log(document.cookie); 
// 輸出: "username=Alice; theme=dark; sessionToken=abc123"

// 解析特定 Cookie
function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === name) {
      return decodeURIComponent(value); // 解碼值
    }
  }
  return null; // 找不到返回 null
}

// 使用範例
const username = getCookie("username");
console.log(username); // Alice

---

3. 刪除 Cookie

刪除 Cookie 的方式是設定相同名稱的 Cookie，但將其 expires 屬性設為過去的日期。

範例

javascript

// 刪除一個 Cookie
document.cookie = "username=Alice; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// 通用刪除函數
function deleteCookie(name, path = "/") {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}`;
}

// 使用範例
deleteCookie("username");

---

4. 使用封裝函數處理 Cookie

為了方便操作 Cookie，可以封裝一組函數來處理。

javascript

// 設定 Cookie
function setCookie(name, value, days = 7, path = "/") {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  const expires = `expires=${date.toUTCString()}`;
  document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=${path}`;
}

// 取得 Cookie
function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === name) {
      return decodeURIComponent(value);
    }
  }
  return null;
}

// 刪除 Cookie
function deleteCookie(name, path = "/") {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}`;
}

// 使用範例
setCookie("user", "Alice", 5); // 設定 Cookie，保存 5 天
console.log(getCookie("user")); // 獲取 Cookie 值
deleteCookie("user"); // 刪除 Cookie
console.log(getCookie("user")); // null

---

注意事項

1. Cookie 的大小限制：

   • 每個 Cookie 的大小通常限制為 4KB。
   • 每個域名最多可以存儲約 20 個 Cookie。

2. 安全性：

   • 使用 secure 屬性可確保 Cookie 只能通過 HTTPS 傳輸。
   • 使用 samesite=strict 可防範跨站請求偽造（CSRF）。

3. 跨域限制：

   • Cookie 默認只適用於設置它的域名和路徑。

4. 敏感數據：

   • 不要在 Cookie 中存儲敏感數據，建議加密後再存。

---

這樣，你就可以方便地操作 Cookie 來儲存和管理用戶的數據。

Javascript FormData() 如何使用 ?

 FormData 是 JavaScript 中的內建對象，用於構建用戶提交的表單數據，並將其以鍵值對的形式傳遞到伺服器。它特別適合處理文件上傳和支持多部分表單數據的請求。

---

1. 基本用法

創建 FormData 對象

可以從現有的 <form> 元素中初始化，也可以手動構建。

javascript

// 從現有表單創建 FormData
const formElement = document.querySelector("form");
const formData = new FormData(formElement);

// 手動創建 FormData
const manualFormData = new FormData();
manualFormData.append("username", "Alice");
manualFormData.append("age", "25");

---

2. FormData 方法

• append(name, value, fileName)：添加一個鍵值對到 FormData 對象中。
• delete(name)：刪除指定鍵名的數據。
• get(name)：獲取指定鍵名的第一個值。
• getAll(name)：獲取指定鍵名的所有值（返回數組）。
• has(name)：檢查是否包含指定鍵名。
• set(name, value, fileName)：設置指定鍵名的值（如果已存在則覆蓋）。

範例

javascript

const formData = new FormData();

// 添加數據
formData.append("username", "Alice");
formData.append("age", "25");
formData.append("hobbies", "reading");
formData.append("hobbies", "traveling"); // 可以添加多個值

// 獲取數據
console.log(formData.get("username")); // Alice
console.log(formData.getAll("hobbies")); // ["reading", "traveling"]

// 更新數據
formData.set("username", "Bob");
console.log(formData.get("username")); // Bob

// 刪除數據
formData.delete("age");
console.log(formData.has("age")); // false

---

3. 文件上傳

FormData 非常適合處理文件上傳，尤其是與 <input type="file"> 配合使用。

範例

HTML：

html

<form id="uploadForm">
  <input type="text" name="username" value="Alice" />
  <input type="file" name="file" />
  <button type="button" onclick="upload()">Upload</button>
</form>

JavaScript：

javascript

function upload() {
  const form = document.getElementById("uploadForm");
  const formData = new FormData(form);

  fetch("https://example.com/upload", {
    method: "POST",
    body: formData
  })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Error:", error));
}

---

4. 遍歷 FormData

可以使用 for...of 迴圈來遍歷 FormData 對象中的鍵值對。

範例

javascript

const formData = new FormData();
formData.append("username", "Alice");
formData.append("age", "25");

for (const [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}
// 輸出:
// username: Alice
// age: 25

---

5. 與 Content-Type 頭的關係

• 使用 FormData 時，不需要手動設置 Content-Type 為 multipart/form-data。
• 瀏覽器會自動為請求添加正確的 Content-Type 和邊界值。

錯誤示範

javascript

fetch("https://example.com/upload", {
  method: "POST",
  body: formData,
  headers: { "Content-Type": "multipart/form-data" } // 不要這樣做
});

正確用法

javascript

fetch("https://example.com/upload", {
  method: "POST",
  body: formData
});

---

6. 使用場景

1. 處理表單數據提交

   • 直接將表單的數據傳遞到伺服器。

2. 文件上傳

   • 支持多文件和單文件上傳。

3. 動態構建數據

   • 手動添加或修改需要發送的數據。

---

7. 注意事項

1. 跨域請求

   • 確保伺服器設置了正確的 CORS 頭。

2. 不支持 JSON 格式

   • 如果伺服器需要 JSON 格式數據，需要手動轉換：

     javascript
     
     const data = { username: "Alice", age: 25 };
     fetch("https://example.com/api", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(data)
     });
     

3. 文件限制

   • 瀏覽器可能對文件大小和數量有一定限制，需要檢查用戶選擇的文件是否符合條件。

---

總結

FormData 是處理表單和文件上傳的強大工具，通過簡單的 API 實現動態數據構建和提交。無需額外的序列化操作，非常適合應用於現代 Web 開發中需要和伺服器交互的場景。

Javascript 中如何用 JSON 序列化及反序列化

在 JavaScript 中，JSON 序列化和反序列化分別是指將 JavaScript 對象轉換為 JSON 字符串（序列化），以及將 JSON 字符串解析為 JavaScript 對象（反序列化）。這可以使用內建的 JSON 對象輕鬆完成。

---

1. JSON 序列化：JSON.stringify()

語法

javascript

JSON.stringify(value, replacer, space)

• value：要序列化的 JavaScript 對象。
• replacer（可選）：一個函數或數組，用於過濾對象屬性。
• space（可選）：指定縮進的空格數量，用於格式化輸出的 JSON 字符串。

範例

javascript

const obj = {
  name: "Alice",
  age: 25,
  hobbies: ["reading", "traveling"],
  isStudent: false
};

// 基本序列化
const jsonString = JSON.stringify(obj);
console.log(jsonString);
// 輸出: {"name":"Alice","age":25,"hobbies":["reading","traveling"],"isStudent":false}

// 帶縮進的序列化（格式化）
const formattedJsonString = JSON.stringify(obj, null, 2);
console.log(formattedJsonString);
/*
輸出:
{
  "name": "Alice",
  "age": 25,
  "hobbies": [
    "reading",
    "traveling"
  ],
  "isStudent": false
}
*/

使用 replacer 過濾屬性

javascript

// 過濾某些屬性
const jsonStringWithFilter = JSON.stringify(obj, ["name", "age"]);
console.log(jsonStringWithFilter);
// 輸出: {"name":"Alice","age":25}

// 使用函數自定義過濾
const jsonStringWithFunction = JSON.stringify(obj, (key, value) => {
  if (key === "age") return undefined; // 過濾掉 age
  return value;
});
console.log(jsonStringWithFunction);
// 輸出: {"name":"Alice","hobbies":["reading","traveling"],"isStudent":false}

---

2. JSON 反序列化：JSON.parse()

語法

javascript

JSON.parse(text, reviver)

• text：要解析的 JSON 字符串。
• reviver（可選）：一個函數，用於轉換解析的結果。

範例

javascript

const jsonString = '{"name":"Alice","age":25,"hobbies":["reading","traveling"],"isStudent":false}';

// 基本反序列化
const obj = JSON.parse(jsonString);
console.log(obj);
// 輸出: { name: 'Alice', age: 25, hobbies: [ 'reading', 'traveling' ], isStudent: false }

使用 reviver 修改解析的值

reviver 函數接收兩個參數：key 和 value，可以用來轉換結果。

javascript

const objWithReviver = JSON.parse(jsonString, (key, value) => {
  if (key === "age") {
    return value + 1; // 年齡加 1
  }
  return value;
});
console.log(objWithReviver);
// 輸出: { name: 'Alice', age: 26, hobbies: [ 'reading', 'traveling' ], isStudent: false }

---

3. JSON 序列化與反序列化的實用範例

儲存和讀取數據

javascript

// 模擬數據儲存到 localStorage
const user = { id: 1, username: "Bob" };
localStorage.setItem("user", JSON.stringify(user));

// 從 localStorage 讀取數據
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser);
// 輸出: { id: 1, username: 'Bob' }

數據傳輸

序列化和反序列化經常用於網絡請求中：

• 序列化：將 JavaScript 對象轉換為 JSON 字符串，發送到伺服器。
• 反序列化：將伺服器返回的 JSON 字符串轉換為 JavaScript 對象。

javascript

// 模擬發送數據
const requestData = { message: "Hello" };
fetch("https://example.com/api", {
  method: "POST",
  body: JSON.stringify(requestData),
  headers: { "Content-Type": "application/json" }
});

// 模擬接收數據
fetch("https://example.com/api")
  .then(response => response.json()) // 自動進行反序列化
  .then(data => console.log(data));

---

注意事項

1. JSON 格式要求

   • JSON 的鍵名必須是雙引號包裹的字符串。
   • 僅支持基本類型：字符串、數字、布爾值、null、數組和對象。
   • 不支持函數、undefined、Symbol 等。

2. 循環引用問題

   • 如果對象中存在循環引用，JSON.stringify() 會拋出錯誤：

     javascript
     
     const obj = {};
     obj.self = obj;
     JSON.stringify(obj); // Uncaught TypeError: Converting circular structure to JSON
     

3. 安全性

   • 在解析不受信任的 JSON 字符串時，要防範惡意輸入。

---

總結

• 序列化：JSON.stringify() 將 JavaScript 對象轉換為 JSON 字符串。
• 反序列化：JSON.parse() 將 JSON 字符串轉換為 JavaScript 對象。

這些方法非常適合用於本地存儲、數據傳輸和動態處理數據。