What is Web Storage
HTML5 的 Web Storage 可讓網頁將資料儲存於客戶端瀏覽器（Client Side）
早期的資料儲存是使用 Cookies， Cookies 會在伺服器和客戶端瀏覽器之間來回傳遞（每次瀏覽器發出請求及伺服器端回應結果）
而 Web Storage 的資料僅儲存於 Clienet Side，這些資料會使用在向伺服器端發送請求，但資料不會被 Server Side 保存，這意味著 Web Storage 不會占用到網路頻寬並且更安全、更快速
Web Storage 資料以 key/value pair （鍵值對）的形式儲存
Browser support
Version 是指瀏覽器第一個支援 Web Storage 的版號
| Browser | Version |
|---|---|
| Chrome | 4.0 |
| Edge | 8.0 |
| Firefox | 3.5 |
| Safari | 4.0 |
| Opera | 11.5 |
Compare
比較 Web Storage 與 Cookies 的差異
| Web Storage | Cookies | |
|---|---|---|
| 可儲存大小 (瀏覽器支援各異) |
5M | 4K |
| 刪除方式 | 使用 API | 關閉瀏覽器 或者設定時間使其過期 |
| 事件支援 | 有 | 無 |
| 處理方式 | JS 物件 | 字串 |
| 存取端 | Client | Client & Server |
| 實際執行 | 發送請求時僅傳遞必要資訊 且伺服器不會保存其資料 |
兩者之間互相傳遞 |
Objects
Web Storage 有兩種，分別為 localStorage 和 sessionStorage，兩種的差異在於生命週期及有效範圍
- localStorage
儲存在 localStorage 中的資料沒有有效期限，且可跨瀏覽器分頁（tag）使用，甚至瀏覽器關閉再開啟都不會消失，直到手動清除它為止。
手動清除：通過 JavaScript 清除或清除 Browser cache/Locally Stored
- sessionStorage
儲存於 sessionStorage 中的資料不可跨瀏覽器分頁（tag），關閉分頁或瀏覽器後資料就會消失。
Store、Retrieve
使用 Storage 物件的 getItem 和 setItem 方法來讀取和儲存資料（Storage 物件指的是 localStorage 或 sessionStorage）
localStorage
// store
window.localStorage.setItem('site', 'https://dev.to/fakestandard');
// window 可以省略不寫
localStorage.setItem('site', 'https://dev.to/fakestandard')
// 也可以使用陣列索引和屬性的寫法
localStorage["site"] = 'https://dev.to/fakestandard';
localStorage.site= 'https://dev.to/fakestandard';
// retrieve
localStorage.getItem('site')
// or
localStorage.site
sessionStorage
// store
window.sessionStorage.setItem('site', 'https://dev.to/fakestandard');
// window 可以省略不寫
sessionStorage.setItem('site', 'https://dev.to/fakestandard')
// 也可以使用陣列索引和屬性的寫法
sessionStorage["site"] = 'https://dev.to/fakestandard';
sessionStorage.site= 'https://dev.to/fakestandard';
// retrieve
sessionStorage.getItem('site')
// or
sessionStorage.site
Remove、Clear
一樣使用 Storage 物件來清除資料，removeItem 可刪除特定資料，clear 則清除所有儲存的資料
localStorage
// remove
localStorage.removeItem('site')
// clear
localStorage.clear()
sessionStorage
// remove
sessionStorage.removeItem('site')
// clear
sessionStorage.clear()
Other method and property
除了以上的方法之外，還有提供 length 與 key 屬性和方法使用，length 可以查看目前儲存的資料數量，key 可查看指定索引的值
// localStorage
localStorage.length
localStorage.key(0)
// sessionStorage
sessionStorage.length
sessionStorage.key(0)
Store other data type
因為 Web Storage 預設是儲存字串，假如要儲存非字串型別，須自行轉換型別
localStorage.count = Number(localStorage.count) + 1
sessionStorage.count = Number(sessionStorage.count) + 1
Store JSON data
如果要儲存的資料比較複雜，則可使用 JSON 物件來轉換成字串再做儲存的動作，或者將取回的字串資料轉換成 JSON 格式再做使用
// store
let content = {
'dev': 'https://dev.to/fakestandard',
'github': 'https://github.com/FakeStandard'
}
localStorage.setItem('site', JSON.stringify(content))
// retrieve
let data = JSON.parse(localStorage.getItem('site'))
console.log(data)
在開發者工具檢查，移到 Application Tag 的 Storage - Local Storage 可看到剛剛所儲存的 web storage
並且在使用之前先檢查瀏覽器是否支援 Web Storage
// check browser support
if (typeof (Storage) !== 'undefined') {
// do something..
} else {
alert('Your browser does not support Web Storage.')
}
Reference
Thanks for reading the article 🌷 🌻 🌼
If you like it, please don't hesitate to click heart button ❤️
or follow my GitHub ⭐ I'd appreciate it.
Top comments (0)