瀏覽器數據持久化存儲技術

第03天

HTTP文件緩存

• 是基於HTTP協議的瀏覽器端文件級緩存機制

# HTML加meta
<meta http-equiv="Expires" content="Mon, 20 Jul 2016 28:88:00 GMT" />
<meta http-equiv="Cache-Control" content="max-age=7200"/>
複製代碼

# 服務端
const static = require('koa-static')
const app = koa()
app.use(static('./pages', {
    maxage:7200
}))
複製代碼

localStorage

• 是HTML5的本地緩存方案
• 不一樣瀏覽器限制不盡相同
• 大小限制指單個域名下的大小
• 可用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規範中定義的
• 將來確定代替Applicatioin Cache的離線方案
• ServiceWorker瀏覽器兼容性差， 不成熟

Flashe緩存

• 讀寫瀏覽器端本地目錄功能
• 給js提供調用的API

關注微信訂閱號，聽音頻