javaScript有三種資料儲存方式，分別是：

• sessionStorage
• localStorage
• cookier

1. sessionStorage

• sessionStorage僅在當前會話下有效，關閉頁面或瀏覽器後被清除；
• setItem(key,value) 設定資料
• getItem(key) 獲取資料
• removeItem(key) 移除資料
• clear() 清除所有值

<script>
  // 新增資料
  window.sessionStorage.setItem("name","李四")
  window.sessionStorage.setItem("age",18)
  // 獲取資料
  console.log(window.sessionStorage.getItem("name")) // 李四
  // 清除某個資料
  window.sessionStorage.removeItem("gender")
  // 清空所有資料
  window.sessionStorage.clear()
</script>

2. localStorage

• localStorage 是 HTML5 標準中新加入的技術，用於長久儲存整個網站的資料，儲存的資料沒有過期時間，直到手動去刪除；
• localStorage和sessionStorage最大一般為5MB，僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊；
• setItem(key,value) 設定資料
• getItem(key) 獲取資料
• removeItem(key) 移除資料
• clear() 清除所有值

<script>
  // 新增資料
  window.localStorage.setItem("name","張三")
  window.localStorage.setItem("age",20)
  window.localStorage.setItem("gender","男")
  // 獲取資料
  console.log(window.localStorage.getItem("name")) // 張三
  // 清除某個資料
  window.localStorage.removeItem("gender")
  // 清空所有資料
  window.localStorage.clear()
</script>

3. cookier

簡介
Cookie 是一些資料,儲存於你電腦上的文字檔案中，用於儲存 web 頁面的使用者資訊
Cookie 資料是以鍵值對的形式存在的，每個鍵值對都有過期時間。如果不設定時間，瀏覽器關閉，cookie就會消失，當然使用者也可以手動清除cookie
Cookie每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來效能問題
Cookie記憶體大小受限，一般每個域名下是4K左右，每個域名大概能儲存50個鍵值對

基本操作
通過訪問document.cookie可以對cookie進行建立，修改與獲取。
預設情況下，cookie 在瀏覽器關閉時刪除，你還可以為 cookie的某個鍵值對 新增一個過期時間

<script>
  // 設定cookie
  document.cookie = "username=orochiz"
  document.cookie = "age=20"
 
  // 讀取cookie
  var msg = document.cookie
  console.log(msg) // username=orochiz; age=20
 
  // 新增過期時間（單位：天）
  var d = new Date() // 當前時間 2019-9-25
  var days = 3    // 3天
  d.setDate(d.getDate() + days)
  document.cookie = "username=orochiz;"+"expires="+d
 
  // 刪除cookie （給某個鍵值對設定過期的時間）
  d.setDate(d.getDate() - 1)
  console.log(document.cookie)
</script>

總結

相同點：都儲存在瀏覽器端，可以下圖位置檢視儲存的資訊

不同點：

①傳遞方式不同

cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。

sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。

②資料大小不同

cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。
儲存大小限制也不同，cookie資料不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合儲存很小的資料，如會話標識。

sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

③資料有效期不同

sessionStorage：僅在當前瀏覽器視窗關閉前有效，自然也就不可能持久保持；

localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料；

cookie只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。

④作用域不同

sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；

localStorage 在所有同源視窗中都是共享的；

cookie也是在所有同源視窗中都是共享的。

Web Storage 支援事件通知機制，可以將資料更新的通知傳送給監聽者。

Web Storage 的 api 介面使用更方便。

到此這篇關於JavaScript本地儲存:localStorage、sessionStorage、cookie的使用的文章就介紹到這了,更多相關JavaScript本地儲存內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！