웹 저장소 정보

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 物件的 getItemsetItem 方法來讀取和儲存資料( 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()
    


    기타 방법 및 속성



    除了以上的方法之外,還有提供 lengthkey 屬性和方法使用, 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 ⭐를 따르십시오.
    또는 커피를 사주세요 ⬇️ 감사합니다.

    좋은 웹페이지 즐겨찾기