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