About Web Storage

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

HTML Web Storage API

Web Storage API

---

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.

---