第03天
HTTP文件缓存
- 是基于HTTP协议的浏览器端文件级缓存机制
# HTML加meta 复制代码
# 服务端const static = require('koa-static')const app = koa()app.use(static('./pages', { maxage:7200}))复制代码 localStorage
- 是HTML5的本地缓存方案
- 不同浏览器限制不尽相同
- 大小限制指单个域名下的大小
- 可用iframe方式使用多个域名突破最大限制
# 安全封装let rkey = /^[0-9A-Za-z_@-]*$/let storefunction 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请求发送到服务端
- 键、值、域、过期时间和大小组成
- 不通域名信息独立
# 设置多个子域中共享Cookiesthis.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