浏览器数据持久化存储技术

第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

关注微信订阅号，听音频