关于存储
- 服务器端cache缓存
- 数据库
- 磁盘文件
- 内存
HTML5之前通常使用cookies去存浏览器端的内容
特点:1.每次都会带上http请求头head上会带着。
2.对每个域名客户端只能存4k左右的大小
3.主Domain污染
不能存太多,会带来安全问题
cookies在浏览器端的存储形态
H5试图解决
- 解决存储4k大小的问题
- 解决请求头带存储信息的问题
- 解决关系型存储的问题
- 跨浏览器
H5的几种存储方式
- 本地存储(localstorage & sessionstorage)
- 离线缓存(application cache)
- IndexedDB 和Web SQL
本地存储
- API有两种
—localstorage && sessionstorage
localstorage 的存储策略是永久存储,除非手动删除
sessionstorage的存储策略是当浏览器关闭,失效。 - 存储形式
—-key—->value键值对 - 存储大小限制为5k
API使用方法:
localstorage API介绍
---getItem
----setItem
----removeItem
---key
----clear
在chorm的工具栏中的Resourcess中可以找到存储方式。
HTML5本地存储都可以存储哪些数据类型
数组 json数据 图片 脚本 样式文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LocalStorage</title>
</head>
<body>
<script>
var src = "./1.jpg";
function set(key){
var img = document.createElement('img');
//当图片加载完成的时候触发回调函数
img.addEventListener("load", function(){
var imgCanvas = document.createElement("canvas");
var imgContext = imgCanvas.getContext("2d");
//确保canvas元素的大小与图片一致
imgContext.width = this.width;
imgContext.height = this.height;
//渲染图片到Canvas中
imgContext.drawImage(this, 0, 0, this.width, this.height);
//用data url的形式取出
var imgAsDataURL = imgCanvas.toDataURL("image/png");
//保存到本地存储中
try{
LocalStorage.setTime(key, imgAsDataURL);
}catch(e){
console.log("Storage failed:"+ e);
}
},false);
}
function get(key){
var srcStr = localStorage.getItem(key);
var imgObj = document.createElement('img');
imgObj.src = srcStr;
document.body.appendChild(imgObj);
}
</script>
</body>
</html>
有问题的代码:img.addEventListener()监听没有起到作用,有待修改BUG
IndexedDB
indexedDB database
一种能在浏览器中持久地存储结构化数据的数据库,并且为web应用提供了丰富的查询能力
- 存储结构
IndexedDB是按照域名分配独立空间,一个独立域名下可以创建多个数据库,每个数据库可以创建多个对象存储空间(表)一个对象存储控件可以存储多个对象数据
IndexedDB的实际应用
- 增 删 改
- 事务
- 游标
- 索引
HTML5离线缓存
离线缓存(offine applicationl)
它可以让Web应用在离线的情况下继续使用,通过mainfest文件指明了网站需要缓存的资源,缓存到浏览器
检测网络是否在线
navigator.onLine
缺点:离线缓存只有在第二次刷新时才能看到修改的内容。
如何更新:
如果有修改资源文件,必须通过修改mainfest来刷新被缓存的文件列表
优势
1.完全离线
2.资源被缓存,加载更快
3.降低server负载
缺陷:
含有mainifest属性的当前请求也无论如何都会缓存
更新需要建立在mainfest文件的更新,文件更新后需要页面再次刷新(需要2次刷新才能获取新资源)
更新是全局性,无法单独更新某个文件
对于链接的参数变化是敏感的,任何一个参数的修改都会被master重新缓存。
使用场景
单地址的页面
对实时性要求不高的业务
离线webapp