关于存储
- 服务器端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（）监听没有起到作用,有待修改BUGIndexedDB
indexedDB database
一种能在浏览器中持久地存储结构化数据的数据库，并且为web应用提供了丰富的查询能力
- 存储结构
IndexedDB是按照域名分配独立空间，一个独立域名下可以创建多个数据库，每个数据库可以创建多个对象存储空间（表）一个对象存储控件可以存储多个对象数据
IndexedDB的实际应用
- 增 删 改
- 事务
- 游标
- 索引
HTML5离线缓存
离线缓存（offine applicationl）
它可以让Web应用在离线的情况下继续使用，通过mainfest文件指明了网站需要缓存的资源，缓存到浏览器
检测网络是否在线
navigator.onLine
缺点：离线缓存只有在第二次刷新时才能看到修改的内容。
如何更新：
如果有修改资源文件，必须通过修改mainfest来刷新被缓存的文件列表
优势
1.完全离线
2.资源被缓存，加载更快
3.降低server负载
缺陷：
含有mainifest属性的当前请求也无论如何都会缓存
更新需要建立在mainfest文件的更新，文件更新后需要页面再次刷新（需要2次刷新才能获取新资源）
更新是全局性，无法单独更新某个文件
对于链接的参数变化是敏感的，任何一个参数的修改都会被master重新缓存。
使用场景
单地址的页面
对实时性要求不高的业务
离线webapp
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
