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的某個鍵值對 添加一個過期時間
如果設定新的cookie時，某個key已經存在，則會更新這個key對應的值，否則他們會同時存在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 介面使用更方便，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/170621.html
標籤：java