About Web Storage
Tags: web, webstorage, html
Published: 2022-07-19 08:02:23

## 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 |
|-|-|-|
| 可儲存大小 <br/> (瀏覽器支援各異) | 5M | 4K |
| 刪除方式 | 使用 API | 關閉瀏覽器 <br/> 或者設定時間使其過期 |
| 事件支援 | 有 | 無 |
| 處理方式 | JS 物件 | 字串 |
| 存取端 | Client | Client & Server |
| 實際執行 | 發送請求時僅傳遞必要資訊 <br/> 且伺服器不會保存其資料 | 兩者之間互相傳遞 |

## 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

```js
// 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

```js
// 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

```js
// remove
localStorage.removeItem('site')

// clear
localStorage.clear()
```

sessionStorage

```js
// remove
sessionStorage.removeItem('site')

// clear
sessionStorage.clear()
```

### Other method and property
除了以上的方法之外，還有提供 `length` 與 `key` 屬性和方法使用，`length` 可以查看目前儲存的資料數量，`key` 可查看指定索引的值

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

// sessionStorage
sessionStorage.length
sessionStorage.key(0)
```

### Store other data type
因為 Web Storage 預設是儲存字串，假如要儲存非字串型別，須自行轉換型別

```js
localStorage.count = Number(localStorage.count) + 1
sessionStorage.count = Number(sessionStorage.count) + 1
```

### Store JSON data
如果要儲存的資料比較複雜，則可使用 `JSON` 物件來轉換成字串再做儲存的動作，或者將取回的字串資料轉換成 JSON 格式再做使用

```js
// 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-002](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnodss3dqnq4nrsy29et.png)

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

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

---

### Reference
[HTML Web Storage API](https://www.w3schools.com/html/html5_webstorage.asp)

[Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API#browser_compatibility)

---

Thanks for reading the article :tulip: :sunflower: :blossom:

If you like it, please don't hesitate to click heart button :heart:
or follow my [GitHub](https://github.com/FakeStandard) :star:
or buy me a coffee :arrow_down: I'd appreciate it.

[![Buy-me-a-coffee][1]][2]

[1]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h077sxd0vx1hix4t7lw8.png
[2]: https://www.buymeacoffee.com/FakeStandard

---