了解 JavaScript 中的本機儲存和會話存儲

JavaScript 中的本機儲存和會話存儲

Web 儲存 API，包括 本機儲存 和 會話儲存，提供了一種在使用者瀏覽器中儲存鍵值對的簡單方法。它們是 HTML5 Web 儲存規範的一部分，用於在客戶端 Web 應用程式中保存資料。

---

1.本地儲存

• 儲存資料無過期時間。
• 即使關閉並重新開啟瀏覽器，資料仍然存在。

主要特點：

• 最大儲存空間：每個網域 ~5MB（因瀏覽器而異）。
• 同步API（大數據可能會阻塞主執行緒）。
• 只能從同一來源存取。

常見用例：

• 儲存使用者偏好（例如主題、語言）。
• 保留購物車資料。

範例：

儲存資料:

localStorage.setItem("username", "JohnDoe");

擷取資料:

const username = localStorage.getItem("username");
console.log(username); // Output: JohnDoe

刪除資料:

localStorage.removeItem("username");

清除所有資料:

localStorage.clear();

---

2.會話儲存

• 僅儲存目前會話的資料。
關閉瀏覽器標籤或視窗時​​資料將被清除。

主要特點：

最大儲存空間：每個網域 ~5MB（因瀏覽器而異）。
同步API。
只能從相同的來源和瀏覽器會話存取。

常見用例：

儲存臨時資料（例如，導航期間的表單輸入）。
追蹤特定於會話的偏好。

範例：

儲存資料:

sessionStorage.setItem("isLoggedIn", "true");

擷取資料:

const isLoggedIn = sessionStorage.getItem("isLoggedIn");
console.log(isLoggedIn); // Output: true

刪除資料:

sessionStorage.removeItem("isLoggedIn");

清除所有資料:

sessionStorage.clear();

---

3.本地儲存和會話儲存之間的區別

功能 本機儲存 會話儲存 標題>

資料壽命

Feature	Local Storage	Session Storage
Data Lifespan	Persistent	Cleared after session
Storage Size	~5MB	~5MB
Scope	Same-origin policy	Same-origin and session
Use Case	Long-term storage	Temporary/session storage

持續 會話後清除 儲存大小 ~5MB ~5MB 範圍 同源策略 同源和會話 用例 長期儲存 臨時/會話儲存 表>

---

4.儲存複雜資料

本機儲存和會話儲存都將資料儲存為字串。要儲存物件等複雜數據，必須使用 JSON.stringify() 和 JSON.parse()。

範例：

localStorage.setItem("username", "JohnDoe");

---

5.最佳實務

1. 避免儲存敏感資料：

   • 資料以純文字形式存儲，可以透過同一網域上的 JavaScript 存取。
   • 對敏感資料使用安全方法（例如僅 HTTP 的 cookie）。

2. 檢查瀏覽器支援：

   • 確保使用者的瀏覽器支援本機儲存和會話儲存：

const username = localStorage.getItem("username");
console.log(username); // Output: JohnDoe

1. 限制資料大小:

   • 僅儲存必要的資料以避免效能問題。

2. 明智地使用鑰匙：

   • 使用唯一按鍵來防止與第三方函式庫發生衝突。

3. 監控儲存使用量:

   • 檢查可用空間以避免超出儲存限制。

---

6.以程式方式清除儲存量

範例：

localStorage.removeItem("username");

---

7.偵錯與管理儲存

大多數現代瀏覽器都提供開發人員工具來檢查本地儲存和會話儲存。

步驟：

1. 開啟開發者工具（F12 或右鍵 > 檢查）。
2. 導覽至「應用程式」標籤。
3. 在「儲存」下，查看「本機儲存」和「會話儲存」。

---

8.總結

功能 本機儲存 會話儲存 標題>

Feature	Local Storage	Session Storage
Persistent Storage	Yes	No
Accessible via JS	Yes	Yes
Data Scope	Origin	Origin Session

持久儲存 是 否

可透過 JS 存取

是 是

資料範圍

來源 原始會話 表>
本機儲存和會話儲存是客戶端資料管理的必備工具。了解何時使用每種最佳實踐以及以下最佳實踐可確保 Web 應用程式的安全高效實施。

嗨，我是 Abhay Singh Kathayat！ 我是一名全端開發人員，擁有前端和後端技術的專業知識。我使用各種程式語言和框架來建立高效、可擴展且用戶友好的應用程式。 請隨時透過我的商務電子郵件與我聯繫：kaashshorts28@gmail.com。

以上是了解 JavaScript 中的本機儲存和會話存儲的詳細內容。更多資訊請關注PHP中文網其他相關文章！