HTML5存储学习笔记 -

bijian1013

浏览: 3245323 次
性别:
来自: 深圳

最近访客更多访客>>

seal1002

dy.f

godandghost

lovefiger

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5存储学习笔记

博客分类：

html5

html5 存储

一.客户端存储历程

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).试用场景：