웹 저장소 정보
11605 단어 htmlwebwebstorage
웹 스토리지란?
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 ⭐를 따르십시오.
또는 커피를 사주세요 ⬇️ 감사합니다.
Reference
이 문제에 관하여(웹 저장소 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/fakestandard/about-web-storage-c59텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)