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

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

---

1.本地儲存

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

主要特點：

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

常見用例：

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

範(fàn)例：

儲存資料:

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

擷取資料:

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

刪除資料:

localStorage.removeItem("username");

清除所有資料:

localStorage.clear();

---

2.會話儲存

• 僅儲存目前會話的資料。
關(guān)閉瀏覽器標(biāo)籤或視窗時??資料將被清除。

主要特點：

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

常見用例：

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

範(fàn)例：

儲存資料:

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

擷取資料:

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

刪除資料:

sessionStorage.removeItem("isLoggedIn");

清除所有資料:

sessionStorage.clear();

---

3.本地儲存和會話儲存之間的區(qū)別

功能 本機儲存 會話儲存 標(biāo)題> 持續(xù) 會話後清除 儲存大小 ~5MB ~5MB 範(fàn)圍 同源策略 同源和會話 用例 長期儲存 臨時/會話儲存 表>

---

4.儲存複雜資料

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

範(fàn)例：

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

---

5.最佳實務(wù)

1. 避免儲存敏感資料：

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

2. 檢查瀏覽器支援：

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

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

1. 限制資料大小:

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

2. 明智地使用鑰匙：

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

3. 監(jiān)控儲存使用量:

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

---

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

範(fàn)例：

localStorage.removeItem("username");

---

7.偵錯與管理儲存

大多數(shù)現(xiàn)代瀏覽器都提供開發(fā)人員工具來檢查本地儲存和會話儲存。

步驟：

1. 開啟開發(fā)者工具（F12 或右鍵 > 檢查）。
2. 導(dǎo)覽至「應(yīng)用程式」標(biāo)籤。
3. 在「儲存」下，查看「本機儲存」和「會話儲存」。

---

8.總結(jié)

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

以上是了解 JavaScript 中的本機儲存和會話存儲的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！