JavaScript 提供了三種在客戶端存儲數據的機制 – cookie、會話存儲和本地存儲。每種機制都有優點和缺點。
本地存儲是最新的機制。它允許存儲大量數據，但關閉瀏覽器時數據不會被刪除。本地存儲對于存儲用戶稍后需要訪問的數據很有用，例如離線數據。
會話存儲與cookie類似，但數據僅存儲用于當前會話。這意味著當用戶關閉瀏覽器時數據將被刪除。會話存儲對于存儲敏感數據（例如登錄憑據）非常有用。
Cookie 是最古老且最著名的機制。它們使用簡單并且受到瀏覽器的良好支持。但是，它們僅限于 4KB 的數據，并且通常用于存儲不敏感的數據，例如用戶首選項。
在本教程中，我們將詳細介紹它們中的每一個。
本地存儲
現在大多數網絡應用程序都需要某種類型的用戶輸入，無論是用戶名、送貨地址，甚至只是首選項設置。然后，該輸入通常會發送到某處的服務器進行處理和存儲。但是，如果您的應用程序需要將數據本地存儲在用戶計算機上怎么辦？這就是本地存儲的用武之地。
本地存儲是一種 Web 存儲，允許 JavaScript 直接在瀏覽器中存儲和訪問數據。這對于存儲即使用戶關閉瀏覽器也希望保留的數據特別有用，例如首選項或設置。
本地存儲中的數據存儲在鍵/值對中。鍵就像數據的名稱，值就像實際數據本身。您可以將其視為 JavaScript 中的變量。要將數據存儲在本地存儲中，首先需要創建一個密鑰。然后，您可以在該鍵下存儲所需的任何數據。
要創建鍵，請使用 setItem() 方法。該方法有兩個參數，第一個是鍵，第二個是要存儲的值。
localStorage.setItem('key', 'value');
登錄后復制登錄后復制
現在您有了密鑰，您可以在該密鑰下存儲您想要的任何數據。您存儲的數據可以是 JavaScript 支持的任何數據類型，包括字符串、數字、對象和數組。
要存儲數據，請再次使用 setItem() 方法。這次，您傳入密鑰作為第一個參數，傳入要存儲的數據作為第二個參數。
localStorage.setItem('key', 'value');
登錄后復制登錄后復制
要從本地存儲檢索數據，請使用 getItem() 方法。此方法將鍵作為參數并返回存儲在該鍵下的數據。
localStorage.getItem('key');
登錄后復制
如果您想從本地存儲中刪除項目，請使用removeItem()方法。此方法將密鑰作為參數并刪除存儲在該密鑰下的數據。
localStorage.removeItem('key');
登錄后復制
會話存儲
會話存儲是一種網絡存儲，允許網絡應用程序在用戶瀏覽器中本地存儲數據。與 Cookie 不同，會話存儲中存儲的數據特定于創建該數據的站點，并且不會與其他站點共享數據。
會話存儲是 HTML5 中引入的一項新功能允許您將數據本地存儲在用戶的瀏覽器中。與 Cookie 不同，會話存儲中存儲的數據特定于創建該數據的站點，并且不會與其他站點共享數據。
會話存儲是一種在應用程序客戶端存儲數據的方式。它類似于
本地存儲，但有一些關鍵區別 –
-
會話存儲數據不與其他站點共享。
會話存儲數據不是持久性的，這意味著它僅在用戶會話期間可用。
會話存儲數據特定于創建它的瀏覽器選項卡。
會話存儲是一個通過減少客戶端和服務器之間需要傳輸的數據量來提高 Web 應用程序性能的好方法。它還可以用于以更安全的方式存儲數據，因為數據不會存儲在可供第三方網站訪問的 Cookie 中。
要在 Web 應用程序中使用會話存儲，您需要您需要使用sessionStorage對象。該對象提供對當前會話存儲的訪問。
sessionStorage 對象有兩個方法
setItem() – 該方法設置一個鍵/值對會話存儲。
sessionStorage.setItem("name", "tutorialsPoint");登錄后復制
getItem() – 此方法從會話存儲中檢索鍵的值。
var name = sessionStorage.getItem("name");登錄后復制
sessionStorage 對象還有一些其他屬性 –
length – 此屬性返回鍵/值的數量會話存儲中的對。
key() – 此方法接受索引作為參數，并返回會話存儲中該索引處的密鑰
會話存儲是提高 Web 應用程序性能并以更安全的方式存儲數據的好方法。
Cookie
Cookie 是存儲在用戶計算機上的一小段數據。 Cookie 用于存儲有關用戶的信息，例如用戶的姓名、密碼和偏好設置。
Cookie 是使用 document.cookie 屬性創建的。此屬性用于設置、獲取和刪除 Cookie。
設置 Cookie
使用 setItem() 方法設置 Cookie。該方法接受兩個參數，cookie的名稱和cookie的值。
cookie的名稱用于標識cookie，值是要存儲在cookie中的信息。 cookie。
以下代碼設置一個名為“name”和值“tutorialsPoint”的 cookie。
document.cookie = "name=tutorialsPoint";
登錄后復制
讀取 Cookie
使用 getItem() 方法讀取 Cookie。此方法接受 cookie 的名稱作為參數并返回 cookie 的值。
如果 cookie 不存在，getItem() 方法將返回 null。
以下代碼讀取“name”cookie 并將值存儲在“user”變量中。
var user = document.cookie.getItem("name");登錄后復制
與本地存儲和會話存儲相比，cookie 的一個優點是它們可以設置為在特定時間過期，這使得它們成為存儲不應長期保留的數據（例如會話 ID）的不錯選擇。
本地存儲、會話存儲和 Cookie 之間的區別
下表突出顯示了本地存儲、會話存儲和 Cookie 之間的主要區別 –
本地存儲 會話存儲 Cookie 允許存儲10MB的數據。 允許存儲5MB的數據。 存儲容量限制為4KB數據。 關閉瀏覽器時不會刪除存儲的數據。 存儲數據僅用于會話并會在瀏覽器關閉時被刪除。 數據可以設置為在某個時間過期。 本地存儲對于存儲用戶稍后需要訪問的數據，例如離線數據。 會話存儲是提高 Web 應用程序性能的好方法。 Cookie 是一個不錯的選擇用于存儲不應該長時間保留的數據，例如會話 ID。 這對于存儲即使用戶關閉也希望保留的數據特別有用瀏覽器，例如首選項或設置。 會話存儲對于存儲敏感數據（例如登錄憑據）非常有用。 Cookie 通常用于存儲不敏感的數據，例如用戶偏好 本地存儲是HTML5中引入的新功能 會話存儲是HTML5中引入的新功能HTML5 Cookie 是最古老的 (HTML4) 和最著名的機制。 數據是不隨客戶端請求發送到服務器。 數據不隨客戶端請求發送到服務器 數據隨客戶端請求發送到服務器 數據存儲在瀏覽器和系統上。 數據僅存儲在瀏覽器上。 數據僅存儲在瀏覽器上。 結論
在本教程中，我們討論了本地存儲、會話存儲之間的區別和餅干。我們已經看到了從該存儲中存儲和檢索數據的不同方法。 本地存儲是最新的機制。它允許存儲更大量（10MB）的數據，但關閉瀏覽器時數據不會被刪除。 會話存儲與cookie類似，但僅存儲當前會話的數據。這意味著當用戶關閉瀏覽器時數據將被刪除。 Cookie 是最古老、最著名的機制。它們使用簡單并且受到瀏覽器的良好支持。但是，它們僅限于 4KB 的數據，并且通常用于存儲不敏感的數據，例如用戶首選項。
以上就是JavaScript 中本地存儲、會話存儲和 Cookie 之間的區別的詳細內容，更多請關注www.92cms.cn其它相關文章！
會話存儲數據僅可供創建它的站點使用。
