브 라 우 저 데이터 영구 화 저장 기술

제 03 일
HTTP 파일 캐 시
  • HTTP 프로 토 콜 을 기반 으로 하 는 브 라 우 저 엔 드 파일 급 캐 시 시스템
  • # HTML meta
    "Expires" content="Mon, 20 Jul 2016 28:88:00 GMT" />
    "Cache-Control" content="max-age=7200"/>
    
    #    
    const static = require('koa-static')
    const app = koa()
    app.use(static('./pages', {
        maxage:7200
    }))
    

    localStorage
  • HTML 5 의 로 컬 캐 시 프로젝트
  • 브 라 우 저 마다 제한 이 다 릅 니 다
  • 크기 제한 은 단일 도 메 인 이름 의 크기
  • 를 가리킨다.
  • 여러 도 메 인 을 iframe 방식 으로 사용 하여 최대 제한 돌파
  • #     
    let rkey = /^[0-9A-Za-z_@-]*$/
    let store
    
    function init(){
      if(typeof store === 'undefined') {
         store = window['localStorage']
      }
      return true;
    }
    function isValidKey(key){
    	if (typeof key !== 'string') {
    		return false
    	}
    	return rkey.test(key)
    }
    
    exports = {
    	set(key, value){
    		let success = false
    		if (isValidKey(key) && init()) {
    			try {
    				value += ''
    				store.setItem(key, value)
    				success = true
    			} catch (e) {}
    		}
    		return success
    	},
    	get(key) {
    		if (isValidKey(key) && init()){
    			try{
    				return store.getItem(key)
    			} catch (e) {}
    		}
    		return null
    	},
    	remove(key){
    		if (isValidKey(key) && init()){
    			try{
    				return store.removeItem(key)
    				return true
    			} catch (e) {}
    		}
    		return false
    	},
    	clear(){
    		if (init()){
    			try{
    				for (let key in store) {
    					store.removeItem(key)
    				}
    				return true
    			} catch (e) {}
    		}
    		return false
    	}
    }
    module.exports = exports
    

    sessionStorage
  • API 와 localStorage 는 완전히 같다
  • 브 라 우 저가 닫 혔 을 때 자동 으로 비 웁 니 다
  • Cookie
  • 사 이 트 는 사용자 의 신분 을 판별 하기 위해 브 라 우 저 에 저 장 된 데이터
  • HTTP 요청 을 통 해 서버 로 전송
  • 키, 값, 도 메 인, 만 료 시간 과 크기 구성
  • 도 메 인 네 임 정보 독립
  • #          Cookies
    this.cookies.set('username', 'ouven', {
       domain: '.domain.com',
        path: '/'
    })
    
    #   
    
    exports = {
    	get(n){
    		let m = document.cookie.match(new RegExp( "(^| )"+n+"=([^;]*)(;|$)" ))
    		return !m ? '' : decodeURIComponent(m[2])
    	},
    	set(name, value, domain, path, hour){
    		let expire = new Date()
    		expire.setTime(expire.getTime() + (hour ? 3600000 * hour : 30*24*60*60*1000))
    		document.cookie = name + '=' + value + ';' + 'expires=' + expire.toGMTString() + ';path=' + (path ? path : '/') + '; ' + (domain ? ('domain=' + domain' + ';') : '')
    	},
    	del (name, domain, path) {
    		document.cookie = name + '=; expires=Mon, 26 Jul 1997 05:00:00 GMT; path=' + (path ? path : '/') + '; ' + (domain ? ('domain=' + domain + ';') : '')
    	},
    	clear() {
    		let rs = document.cookie.match(new RegExp("([^;][^;]*)(?=(=[^;]*)(;|$))", 'gi'))
    		for (let i in rs) {
    			document.cookie = rs[i] + '=;expires=Mon, 26 Jul 1997 05:00:00 GMT; path=/;'
    		}
    	}
    }
    module.exports = exports
    

    WebSQL
  • 대량의 데 이 터 를 저장 하 는 캐 시 메커니즘
  • 호환성 문제
  • 사용 장면 제한
  • IndexDB
  • 대량의 구조 화 데이터 저장
  • 색인 검색 가능
  • 로 컬 데이터 유출 저장
  • Application Cache
  • manifest 설정 파일 을 통 해 정적 자원 을 선택적으로 저장 하 는 파일 급 캐 시 메커니즘
  • 미 성숙 한 로 컬 캐 시 솔 루 션
  • cacheStorage
  • ServiceWorker 규범 에서 정 의 된
  • 앞으로 애플 리 케 이 션 캐 시 를 대체 할 오프라인 방안
  • ServiceWorker 브 라 우 저 호환성 이 떨 어 지고 성숙 하지 않 음
  • Flashe 캐 시
  • 읽 기 및 쓰기 브 라 우 저 로 컬 디 렉 터 리 기능
  • js 에 호출 된 API 제공
  • 위 챗 구독 번호 주목, 오디 오 듣 기

    좋은 웹페이지 즐겨찾기