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 ⭐
or buy me a coffee ⬇️ I'd appreciate it.
Top comments (0)