DEV Community

Cover image for About Web Storage
FakeStandard
FakeStandard

Posted on • Edited on

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 有兩種,分別為 localStoragesessionStorage,兩種的差異在於生命週期及有效範圍

  • localStorage

儲存在 localStorage 中的資料沒有有效期限,且可跨瀏覽器分頁(tag)使用,甚至瀏覽器關閉再開啟都不會消失,直到手動清除它為止。

手動清除:通過 JavaScript 清除或清除 Browser cache/Locally Stored

  • sessionStorage

儲存於 sessionStorage 中的資料不可跨瀏覽器分頁(tag),關閉分頁或瀏覽器後資料就會消失。

Store、Retrieve

使用 Storage 物件的 getItemsetItem 方法來讀取和儲存資料(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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Remove、Clear

一樣使用 Storage 物件來清除資料,removeItem 可刪除特定資料,clear 則清除所有儲存的資料

localStorage

// remove
localStorage.removeItem('site')

// clear
localStorage.clear()
Enter fullscreen mode Exit fullscreen mode

sessionStorage

// remove
sessionStorage.removeItem('site')

// clear
sessionStorage.clear()
Enter fullscreen mode Exit fullscreen mode

Other method and property

除了以上的方法之外,還有提供 lengthkey 屬性和方法使用,length 可以查看目前儲存的資料數量,key 可查看指定索引的值

// localStorage
localStorage.length
localStorage.key(0)

// sessionStorage
sessionStorage.length
sessionStorage.key(0)
Enter fullscreen mode Exit fullscreen mode

Store other data type

因為 Web Storage 預設是儲存字串,假如要儲存非字串型別,須自行轉換型別

localStorage.count = Number(localStorage.count) + 1
sessionStorage.count = Number(sessionStorage.count) + 1
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

在開發者工具檢查,移到 Application Tag 的 Storage - Local Storage 可看到剛剛所儲存的 web storage

web-storage-002

並且在使用之前先檢查瀏覽器是否支援 Web Storage

// check browser support
if (typeof (Storage) !== 'undefined') {
    // do something..
} else {
    alert('Your browser does not support Web Storage.')
}
Enter fullscreen mode Exit fullscreen mode

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
or buy me a coffee ⬇️ I'd appreciate it.

Buy-me-a-coffee


Top comments (0)