資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究JavaScript 中的本地儲存、會話儲存和 Cookie 的區別
JavaScript 提供了三種在客戶端儲存資料的機制 - Cookie、會話儲存和本地儲存。每種機制都有其優點和缺點。
本地儲存是最新的機制。它允許儲存大量資料，但資料在瀏覽器關閉後不會被刪除。本地儲存適用於儲存使用者以後需要訪問的資料，例如離線資料。
會話儲存類似於 Cookie，但資料僅儲存在當前會話期間。這意味著當用戶關閉瀏覽器時，資料將被刪除。會話儲存適用於儲存敏感資料，例如登入憑據。
Cookie是最古老且最廣為人知的機制。它們易於使用並且得到瀏覽器的良好支援。但是，它們的資料限制為 4KB，通常用於儲存不敏感的資料，例如使用者偏好設定。
在本教程中，我們將詳細瞭解每種機制。
本地儲存
如今，大多數 Web 應用程式都需要某種型別的使用者輸入，無論是使用者名稱、送貨地址，還是僅僅是偏好設定。然後，此輸入通常傳送到某個伺服器進行處理和儲存。但是，如果您的應用程式需要在使用者的計算機上本地儲存資料怎麼辦？這就是本地儲存的用武之地。
本地儲存是一種 Web 儲存型別，允許 JavaScript 直接在瀏覽器中儲存和訪問資料。這對於儲存即使使用者關閉瀏覽器也希望保留的資料（例如偏好設定或設定）特別有用。
本地儲存中的資料以鍵值對的形式儲存。鍵就像資料的名稱，值就像實際資料本身。您可以將其視為 JavaScript 中的變數。要將資料儲存在本地儲存中，首先需要建立一個鍵。然後，您可以在該鍵下儲存任何所需的資料。
要建立鍵，請使用setItem()方法。此方法接受兩個引數，第一個是鍵，第二個是要儲存的值。
localStorage.setItem('key', 'value');現在您有了鍵，就可以在該鍵下儲存任何所需的資料。您儲存的資料可以是 JavaScript 支援的任何資料型別，包括字串、數字、物件和陣列。
要儲存資料，請再次使用setItem()方法。這次，將鍵作為第一個引數傳遞，將要儲存的資料作為第二個引數傳遞。
localStorage.setItem('key', 'value');要從本地儲存中檢索資料，請使用getItem()方法。此方法將鍵作為引數，並返回儲存在該鍵下的資料。
localStorage.getItem('key');如果要從本地儲存中刪除專案，請使用removeItem()方法。此方法將鍵作為引數，並刪除儲存在該鍵下的資料。
localStorage.removeItem('key');
會話儲存
會話儲存 是一種 Web 儲存型別，允許 Web 應用程式在使用者的瀏覽器中本地儲存資料。與 Cookie 不同，儲存在會話儲存中的資料特定於建立它的站點，並且資料不會與其他站點共享。
會話儲存是 HTML5 中引入的一項新功能，允許您在使用者的瀏覽器中本地儲存資料。與 Cookie 不同，儲存在會話儲存中的資料特定於建立它的站點，並且資料不會與其他站點共享。
會話儲存是在應用程式客戶端儲存資料的一種方式。它類似於本地儲存，但有一些關鍵區別 -
會話儲存資料僅對建立它的站點可用。
會話儲存資料不會與其他站點共享。
會話儲存資料不是永久性的，這意味著它僅在使用者在站點上的會話期間可用。
會話儲存資料特定於建立它的瀏覽器選項卡。
會話儲存是透過減少客戶端和伺服器之間需要傳輸的資料量來提高 Web 應用程式效能的好方法。它還可以用於更安全地儲存資料，因為資料不會儲存在 Cookie 中，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
Cookie 是使用setItem()方法設定的。此方法接受兩個引數，Cookie 的名稱和 Cookie 的值。
Cookie 的名稱用於識別 Cookie，值是要儲存在 Cookie 中的資訊。
以下程式碼設定了一個名為“name”且值為“tutorialsPoint”的 Cookie。
document.cookie = "name=tutorialsPoint";
讀取 Cookie
Cookie 是使用getItem()方法讀取的。此方法將 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中引入的一項新功能 | Cookie 是最古老的（HTML4）且最廣為人知的機制。 |
| 資料不會隨客戶端到伺服器的請求一起傳送。 | 資料不會隨客戶端到伺服器的請求一起傳送 | 資料會隨客戶端到伺服器的請求一起傳送 |
| 資料儲存在瀏覽器和系統上。 | 資料僅儲存在瀏覽器上。 | 資料僅儲存在瀏覽器上。 |
結論
在本教程中，我們討論了本地儲存、會話儲存和 Cookie 之間差異。我們已經瞭解了從這些儲存中儲存和檢索資料的方法。本地儲存是最新的機制。它允許儲存大量資料（10MB），但資料在瀏覽器關閉後不會被刪除。會話儲存類似於 Cookie，但資料僅儲存在當前會話期間。這意味著當用戶關閉瀏覽器時，資料將被刪除。Cookie是最古老且最廣為人知的機制。它們易於使用並且得到瀏覽器的良好支援。但是，它們的資料限制為 4KB，通常用於儲存不敏感的資料，例如使用者偏好設定。
41K+ 瀏覽量
