웹 저장소 정보

웹 스토리지란?

HTML5 的 Web Storage 可讓網頁將資料儲存於客戶端瀏覽器(클라이언트 측)

早期的資料儲存是用 Cookies, Cookies 會在伺服器和客戶端瀏覽器之間來回傳遞(每次瀏覽器發出請求及伺服器端回應絞)

而 웹 스토리지 的資料僅儲存於 클라이언트 측,這些資料會使用在向伺服器端發送請求,但資料不會被 서버 측 保存,這意味著 웹 스토리지 不會堂用到綴毴䯔帻快速

Web Storage 資料以 키/값 쌍(鍵值對)的形式儲存

브라우저 지원

버전 是指瀏覽器第一個支援 Web Storage 的版號


브라우저
버전


크롬
4.0

가장자리
8.0

파이어폭스
3.5

원정 여행
4.0

오페라
11.5

비교하다

Web Storage 與 Cookies 的 差異



웹 스토리지
쿠키


可儲存大小(瀏覽器支援各異)
500만
4K

刪除方式
사용 API
關閉瀏覽器 或者設定時間使其過期

事件支援
있다
無

處理方式
JS 物件
字串

存取端
고객
클라이언트 서버

實際執行
發送請求時僅傳遞必要資訊 且伺服器不會保存其資料
兩者之間互相傳遞

사물

Web Storage는 localStorage와 sessionStorage로 나누어져 있으며, 兩種的差異은 生命週期에서 有效範圍

로컬스토리지

儲存에서 localStorage 中的資料沒有有效期限,且可跨瀏覽器分頁(태그) 사용,甚至瀏覽器關閉再開啟都不會消失,直到手動清除它為止.

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

세션스토리지

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

저장, 검색

用 Storage 物件的 getItem 和 setItem 方法來讀取和儲存資料( Storage 物件指的是 localStorage 或 sessionStorage)

로컬 스토리지

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

세션 저장소

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

제거、지우기

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

로컬 스토리지

// remove
localStorage.removeItem('site')

// clear
localStorage.clear()

세션 저장소

// remove
sessionStorage.removeItem('site')

// clear
sessionStorage.clear()

기타 방법 및 속성

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

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

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

다른 데이터 유형 저장

因為 웹 스토리지

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

JSON 데이터 저장

如果要儲存的資料比較複雜,則可使用 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)

에서 응용 프로그램 태그 的 저장소 - 로컬 저장소 可看到剛剛所儲存的 웹 저장소




並且在使用之前先檢查瀏覽器是否支援 웹 저장소

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

참조

HTML Web Storage API

Web Storage API


글 읽어주셔서 감사합니다 🌷 🌻 🌼

마음에 드셨다면 주저말고 하트 꾸욱 눌러주세요❤️
또는 내 GitHub ⭐를 따르십시오.
또는 커피를 사주세요 ⬇️ 감사합니다.