JavaScript 中本機儲存、會話儲存和 Cookie 之間的區別

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 之間的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！