您当前的位置: 一.客户端存储历程
1.远古时期
a.cookies的用法和缺陷
主要用作购物车或身份的验证
缺陷：
1).http请求头上会带着
2).大小4k
3).主Domain污染
cookies在浏览器存储形态
Name:key值
Value:key值对应的Value
Domain:存在所属的Domain
Path:根路径
Expires:过期时间
Size:cookie字符的长度，各浏览器计算方法（加name不加name）不同可能不一样
HTTP:勾上的表明此cookie只能被服务端读取或者修改，身份信息存这个比较好
Secure:勾上说明请求只能是加密的
以baidu为例进一步说明：
1).在主页的console台输出所有的cookie，发现无key值为BDUSS的cookie。
2).music.baidu.com的请求头上带有主域名的cookie[所以，不能随意在主域名中加cookie]
b.userdata（不符合W3C标准）
1).只有IE支持（5.0-9.0），存储大小64K
2).XML文件
c.google Gears：Chrome支持的客户端存储，引擎是64SQLite，12.0以后版本已放弃支持，且必须通过用户授权。
二.HTML5存储的目标
1.解决4k的大小问题
2.解决请求头常带存储信息的问题
3.解决关系型存储的问题
4.跨浏览器
三.HTML5的三种存储
1.本地存储(localstorage&&sessionstorage)
1)存储形式：key-value
2)过期：永久存储，永不失效，除非手动删除。对于sessionstorage，重新打开页面或者关闭浏览器，sessionstorage失效。
3)大小：官方给出文档是每个域名5M
4)浏览器支持情况：IE8以上、Firefox、Chrome都支持
5)使用方法：localstorage API介绍（getItem、setItem、removeItem、key、clear）
实例：
6)可以存数组、json数据、图片、脚本、样式文件
实例：
datauri.html
<html>
<head>
<meta charset="utf-8">
<!--
网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="MobileOptimized" content="320">
<title>pic storage demo</title>
</head>
<body>
<script type="text/javascript">
var src="01.jpg";
function set(key) {
var img = document.createElement('img');
<!-- 当图片加载完成的时候触发回调函数 -->
img.addEventListener("load", function() {
var imgCanvas = document.createElement("canvas"), imgContext = imgCanvas.getContext("2d");
<!-- 确保canvas元素的大小和图片尺寸一致 -->
imgCanvas.width = this.width;
imgCanvas.height = this.height;
<!-- 渲染图片到canvas中 -->
imgContext.drawImage(this, 0, 0, this.width, this.height);
<!-- 用data url的形式取出 -->
var imgAsDataURL = imgCanvas.toDataURL("image/png");
<!-- 保存到本地存储中 -->
try {
localStorage.setItem(key, imgAsDataURL);
}catch(e) {
console.log("Storage failed:" + e);
}
}, false);
img.src = src;
}
function get(key) {<!-- 从本地缓存获取图片并且渲染 -->
var srcStr = localStorage.getItem(key);
var imgObj = document.createElement('img');
imgObj.src = srcStr;
document.body.appendChild(imgObj);
}
</script>
</body>
</html>
运行效果：
7)使用注意事项：
i.使用前要判断浏览器是否支持
ii.写数据时，需要异常处理，避免超出容量抛错
iii.避免把敏感的信息存入localstorage
iv.key的唯一性
8)使用限制：
i.存储更新策略，过期控制
自已开发实现带有过期控制的实例：
timeout.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="MobileOptimized" content="320">
<title>timeout demo</title>
</head>
<body>
<script type="text/javascript">
function set(key,v) {
var curTime = new Date().getTime();
localStorage.setItem(key, JSON.stringify({data:v, time:curTime}));
}
function get(key, exp) {
var data = localStorage.getItem(key);
var dataObj = JSON.parse(data);
if(new Date().getTime() - dataObj.time > exp) {
console.log('expires');
}else {
console.log('data=' + dataObj.data);
}
}
</script>
</body>
</html>
运行效果：
ii.子域名之间不能共享存储数据（可以借助HTML5的postMessage方式做跨域的处理，达到子域名之间数据共享的目的）
iii.超出存储大小之后如何存储（业务处理，try...catch...，用LRU，FIFO方法淘汰掉旧的数据）
iv.server端如何取到（只能跟在相应的参数后面）
9)使用场景
i.利用本地数据，减少网络传输
ii.弱网络环境下，高廷迟，低带宽，尽量把数据本地化
2.indexedDB和Web SQL
indexedDB database：一种能在浏览器中持久地存储结构化数据的数据库，并且为web应用提供了丰富的查询能力。
浏览器支持：chrome 11+，opera 不支持，firefox 4+，IE 10+
存储结构：
实例：增、删、改；事务；游标；索引。
3.离线缓存(application cache)
1).离线缓存(offline application)：它可以让Web应用在离线的情况下继续使用，通过manifest文件指明需要缓存的资源。
2).检测是否在线：navigator.onLine
3).原理：
4).浏览器支持情况：Safari on iOS 3.2+、Android Browser 1.5+、IE 9+、Chrome 4+等，支持面比较广。
5).使用：
a.创建manifest文件
CACHE MANIFEST #version n.n CACHE: #需要缓存的文件 /css/sample.css /images/image.jpg NETWORK: #每次重新拉取的文件 * FALLBACK： #离线状况下代替文件 /offline.html
b.在HTML页面中引用manifest文件
<html manifest="sample.appcache">
c.在服务器添加mime-type text/cache-manifest
如在apache的conf目录下的mime-types文件的最后加上如下一行内容：
text/cache-manifest appcache
6)实例
appcache.html
<html lang="en" manifest='manifest.appcache'>
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="MobileOptimized" content="320">
<link rel="stylesheet" type="text/css" href="./css/assets.css"></link>
<title>app cache demo</title>
</head>
<body>
<h1>APP Cache Demo</h1>
<ul>
<li><img src="./img/1.jpg"></img></li>
<li><img src="./img/2.jpg"></img></li>
</ul>
<script type="text/javascript">
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
window.log(window.applicationCache.status);
if(window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
if(confirm('A new version of this site is available.Load it?')) {
window.location.reload();
}
}else {
console.log('manifest didn't change');
}
}, false);
},false);
</script>
</body>
</html>
manifest.appcache
CACHE MANIFEST #version 1.1 CACHE: img/1.jpg img/2.jpg css/assets.css NETWORK: *
运行效果：
第一次打开页面：
此时可以看离线缓存信息如下：
再次刷新页面，显示Application Cache无更新：
我们将manifest.appcache中的版本号改成1.2，并修改appcache.html中h1标签的内容为“APP Cache Demo 1”，再刷新页面：
点“确认”：
如果觉得页面不适合用离线缓存，重命名manifest.appcache文件名即可。
7).如何更新？
如果有修改资源文件，必须通过修改manifest文件来刷新被缓存的文件列表。
8).优势：
a.完全离线
b.资源被缓存，加载更快
c.降低server负载
9).使用缺陷：
a.含有manifest属性的当前请求页无论如何都会被缓存
b.更新需要建立在manifest文件的更新，文件更新后是需要页面再次刷新的（需要2次刷新才能获取新资源）
c.更新是全局性的，无法单独更新某个文件（无法单点更新）
d.对于链接的参数变化是敏感的，任何一个参数的修改都会被（master）更新缓存（重复缓存含参页面）index.html和index.html?renew=1会被认为是不同文件，分别缓存
实例：
浏览器输入http://localhost:8088/html5/appcache.html?a=1，离线缓存被创建
浏览器输入http://localhost:8088/html5/appcache.html?a=2，可以看到增加了一个master entry到离线缓存
此时，我们修改manifest.appcache中的version，刷新页面我们发现页面会将a=1和a=2全部下载一遍
查看Resources我们发现a=1和a=2在浏览器里生成两份application cache，当检测到不同时，会将相关的文件都拉取一遍
10).试用场景：
a.单地址的页面
b.对实时性要求不高的业务
c.离线webapp
Application cache的应用-金融时报:http://app.ft.com/，我们先设置一下chrome浏览器的代理为“Apple iPhone 5"(点击那个 ">三" 的图标，Then select “Emulatio" 即可看到)
四.HTML5存储能解决什么问题？
1.实现把图片存在客户端
2.实现跨域共享客户端缓存
3.做到真正的离线访问web应用
4.实现一个客户端的数据库
五.总结
1.html5存储优势：
a.存储空间大
b.接口丰富
c.数据相对安全
d.省流量
e.关系型（indexedDB）
2.html5存储劣势
a.浏览器兼容
b.同源（localstorage不可以跨子域，manifest文件必须和引用它的文件在同一个域名下面）
c.脚本控制（只能在浏览器端存放，如果服务器端也想拿到这些数据只能通过请求）
d.更新策略（localstorage是永不过期的，如果想要实现更新策略，需要业务开发实现更新机制）
学习视频地址：http://www.imooc.com/video/3127