关于html5缓存部分比较详细的说明
历史
在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择:
- HTTP cookie。HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)。
- IE userData。userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案,借助DHTML的behaviour属性来存储本地数据, 允许每个页面最多存储64K数据,每个站点最多640K数据,userData的缺点显而易见,它不是Web标准的一部分,除非你的程序只需要支持IE, 否则它基本没什么用处。
- Flash cookie。Flash cookie的名字有些误导,它实际上和HTTP cookie并不是一回事,或许它的名字应该叫做"Flash本地存储”,Flash cookie默认允许每个站点存储不超过100K的数据,如果超出了,Flash会自动向用户请求更大的存储空间,借助Flash的 ExternalInterface接口,你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单,就是因为它是 Flash。
- Google Gears。Gears是Google在07年发布的一个开源浏览器插件,旨在改进各大浏览器的兼容性,Gears内置了一个基于SQLite的嵌入式 SQL数据库,并提供了统一API对数据库进行访问,在取得用户授权之后,每个站点可以在SQL数据库中存储不限大小的数据,Gears的问题就是 Google自己都已经不用它了。
现状
我们现在通常所说的HTML5本地存储,一般指的是Web Storage规范,这个标准曾经是HTML5规范的一部分,但后来因为种种原因从HTML5规范中分离了出来。但是除了Web Storage,HTML5的本地存储标准还有另外2个竞争者:Web SQL Database和IndexedDB。下面就让我们依次来看看这3个规范吧。
Web Storage
Web Storage是目前得到支持最广泛的HTML5本地存储规范:IE 8+、FF 3.5+、Safari 4+、Chrome 4+、Opera 10.5+,以及iPhone 2+和Android 2+都已经支持Web Storage,要判断你的浏览器是否支持Web Storage,可以使用下面这个函数:
- function supports_html5_storage() {
- try {
- return 'localStorage' in window && window['localStorage'] !== null;
- } catch (e) {
- return false;
- }
- }
function supports_html5_storage() {try {return 'localStorage' in window && window['localStorage'] !== null;} catch (e) {return false;} }
HTML5 Storage的使用非常简单:
- var foo = localStorage.getItem("bar");
- // ...
- localStorage.setItem("bar", foo);
var foo = localStorage.getItem("bar"); // ... localStorage.setItem("bar", foo);
你也可以写成下面这样:
- var foo = localStorage["bar"];
- // ...
- localStorage["bar"] = foo;
var foo = localStorage["bar"]; // ... localStorage["bar"] = foo;
如果要将某个key从存储空间删除,可以调用removeItem:
- localStorage.removeItem('foo');
localStorage.removeItem('foo');
你也可以像遍历数组那样遍历存储的所有键值对象:
- for(var i=0; ivar key = localStorage.key(i);
- console.log(key + ":" + localStorage[key]);
- }
for(var i=0; ivar key = localStorage.key(i);console.log(key + ":" + localStorage[key]); }
如果你的程序需要在不同页面访问同一个值,你可能需要了解这个值是否已经被其他页面改变了,这可以通过向浏览器注册storage事件来实现:
- window.addEventListener('storage', function(e) {
- console.log(e.key + "'s value is changed from '" +
- e.oldValue + "' to '" + e.newValue + "' by " + e.url);
- }, false);
- //A页面
- localStorage['foo'] = 'bar';
- //B页面
- localStorage['foo'] = 'newBar';
window.addEventListener('storage', function(e) {console.log(e.key + "'s value is changed from '" +e.oldValue + "' to '" + e.newValue + "' by " + e.url); }, false);//A页面 localStorage['foo'] = 'bar';//B页面 localStorage['foo'] = 'newBar';
这时你应该会在A页面的Console中看到:
foo’s value is changed from ‘bar’ to ‘newbar’ by http://localhost/test.html
要注意的是,storage事件仅仅只是通知你某个键对应的值已经发生了改变,你没有办法在回调中阻止这个改变发生。
HTML5 Storage看起来不错,那它有没什么缺点呢?好问题。要说HTML5 Storage的缺点,唯一的问题就是它默认的QUOTA只有5MB,并且你没办法通过程序自行或是提示用户来增加存储空间。唯一的办法就是用户自己打开 浏览器的设置,并手动修改QUOTA的大小,如果超出了5MB的限制,你将会遇到一个“QUOTA_EXCEEDED_ERR”的错误。
Web SQL Database
Web SQL Database是一个已经废弃的规范,但是鉴于除了IE和Firefox,其他浏览器都已经实现了Web SQL Database,并且它还具有一些HTML5 Storage所不具有的特性,所以还是值得了解一下的。
Web SQL Database就像它的名字那样,就是一个让你可以在Web上直接使用的SQL数据库,你要做的就是打开数据库,然后执行SQL,和你对Mysql做的事情没什么两样:
- openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024,
- function (db) {
- db.changeVersion('', '1.0', function (t) {
- t.executeSql('CREATE TABLE docids (id, name)');
- }, error);
- });
openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, function (db) {db.changeVersion('', '1.0', function (t) {t.executeSql('CREATE TABLE docids (id, name)');}, error); });
关于Web SQL Database的更多介绍,可以参看这篇指南。
但是它的缺点也同样明显。最大的问题就出在SQL上,实际上并不存在一种叫做SQL的标准结构化查询语言,我们平常使用的实际上是MS SQL、Oracle SQL、MySQL SQL、postgre SQL或者SQLite SQL(尽管有一个叫做SQL-92的规范,但它基本形同虚设),更进一步,甚至都不存在SQLite SQL,我们使用的实际上是SQLite x.y.z SQL,而这也就是Web SQL Database最大的问题,它无法统一各个浏览器厂商实现的SQL语言,如果你的某条Web SQL查询只能在Chrome上运行,这还能叫做标准吗?
所以,如果你现在访问Web SQL Database的规范页面,你会在顶部看到这样一则声明:
这个规范已经陷入了一个僵局:目前的所有实现都是基于同一个SQL后端(SQLite),但是我们需要更多的独立实现来完成标准化,所以除非有厂商愿意独立实现这个规范,否则当前的SQL规范只能采用SQLite的SQL方言,而作为一个标准,这是不可接受的。
IndexedDB
最后我们要介绍的就是IndexedDB了,相比其他两个规范,目前只有Firefox实现了IndexedDB(顺便提一下,Mozilla表示它们永远不会去实现Web SQL Database),不过Google已经表示正在考虑在Chrome中加入IndexDB支持。
IndexedDB引入了一个object store的概念,这有点像是一个SQL Database,你可以在“数据库”中存储“记录”,并且每条“记录”可以拥有很多“字段",每个字段都有一个特定的数据类型,你可以选择记录的子集, 并使用“光标”进行遍历,同时object store中的所有变更都是基于“事务”的。
下面让我们来看一个小例子:
- var request = window.indexedDB.open("CandyDB",
- "My candy store database");
- request.onsuccess = function(event) {
- var db = event.result;
- if (db.version != "1") {
- // User's first visit, initialize database.
- var createdObjectStoreCount = 0;
- var objectStores = [
- { name: "kids", keyPath: "id", autoIncrement: true },
- { name: "candy", keyPath: "id", autoIncrement: true },
- { name: "candySales", keyPath: "", autoIncrement: true }
- ];
- function objectStoreCreated(event) {
- if (++createdObjectStoreCount == objectStores.length) {
- db.setVersion("1").onsuccess = function(event) {
- loadData(db);
- };
- }
- }
- for (var index = 0; index < objectStores.length; index++) {
- var params = objectStores[index];
- request = db.createObjectStore(params.name, params.keyPath,
- params.autoIncrement);
- request.onsuccess = objectStoreCreated;
- }
- }
- else {
- // User has been here before, no initialization required.
- loadData(db);
- }
- };
var request = window.indexedDB.open("CandyDB","My candy store database"); request.onsuccess = function(event) {var db = event.result;if (db.version != "1") {// User's first visit, initialize database.var createdObjectStoreCount = 0;var objectStores = [{ name: "kids", keyPath: "id", autoIncrement: true },{ name: "candy", keyPath: "id", autoIncrement: true },{ name: "candySales", keyPath: "", autoIncrement: true }];function objectStoreCreated(event) {if (++createdObjectStoreCount == objectStores.length) {db.setVersion("1").onsuccess = function(event) {loadData(db);};}}for (var index = 0; index < objectStores.length; index++) {var params = objectStores[index];request = db.createObjectStore(params.name, params.keyPath,params.autoIncrement);request.onsuccess = objectStoreCreated;}}else {// User has been here before, no initialization required.loadData(db);} };
关于Indexed的更多介绍可以参看Mozilla Blog的这篇指南。
--------
本文编译整理自:Mark Pilgrim的Dive Into HTML5 第七章 HTML5本地存储,编译:@yuanyiz。
关于html5缓存部分比较详细的说明相关推荐
- HTML5缓存和GPS定位
HTML5缓存 我们在访问网站的时候,会从网站服务器中下载很多数据,其中包括css文件.图片文件.js文件.音频文件等等,有时候一个页面这种零零散散的文件就要下载上百个,可以打开浏览器的开发者工具,点 ...
- 使用Varnish代替Squid做网站缓存加速器的详细解决方案
我曾经写过一篇文章──<初步试用Squid的替代产品──Varnish Cache网站加速器>,但当时仅仅是用着玩,没做深入研究. 今天写的这篇关于Varnish的文章,已经是一篇可以完全 ...
- SpringBoot 缓存之 @Cacheable 详细介绍
一.简介 1.缓存介绍 Spring 从 3.1 开始就引入了对 Cache 的支持.定义了 org.springframework.cache.Cache 和 org.springframework ...
- Spring+EhCache缓存实例(详细讲解+源码下载)
转载注明出处http://blog.csdn.net/u013142781 一.ehcahe的介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的 ...
- 面试 | 从一个API缓存演化,详细了解Redis各项功能
什么是Redis Redis是一个基于BSD开源的项目,用于把结构化的数据放入到内存中,的存储系统,可以把它作为数据库,缓存和中间件使用.支持复制,Lua脚本,LRU,事物等等功能.通过redis 哨 ...
- html5缓存的功能,HTML 5新特性:Web应用缓存实现离线浏览
HTML5 IndexedDB:轻量级NoSQL数据库 IndexedDB是HTML5-WebStorage的重要一环,是一种轻量级NoSQL数据库. w3c为IndexedDB定义了很多接口,其中D ...
- offline.appcache,html5缓存清单文件简单说明
支持浏览器:Firefox 3.5+ Safari 4.0+ Chrome 5.0+ Opera10.6+ iPhone 2.1+ Android 2.0+, IE,貌似只 ...
- asp.net html5 缓存,ASP.NET 缓存有效时间设置解决思路
C# codeusing System; using System.Web.Caching; using System.Web; using System.Collections; using Sys ...
- php能不能动态显示html5,php – 是否可以动态生成html5缓存清单?
解决方法: 很确定,但是让我告诉你:让HTML5离线内容与JavaScript applicationCache.update()等完美配合.人.如果你是新手,有点麻烦.最终一切都有效--记录在案!但 ...
最新文章
- 未将对象引用设置到对象的实例
- 某程序的bug是什么意思?
- SSH与SSM的区别以及相关技术的流行度
- Spring Cloud文档阅读笔记-初识Spring Cloud(对Spring Cloud初步了解)
- java输入两个整数_Java中从键盘输入多个整数的方法
- 关于constraint 的disable和enable
- oracle查询特殊字符-escape
- 区间dp讲解之石子合并问题 区间dp的分析方法
- 硬笔行书字帖3500常用字_硬笔行书每日一字 · 出
- 51单片机 1-LED灯流水灯 练习3-流水灯(_crol_位移)
- sin的傅里叶变换公式_正弦和余弦函数的傅里叶变换
- 地图编辑器开发(一)
- Tomcat启动成功,但是访问项目时或者是localhost:8080时出现404
- 淘丞相将微博链接转为淘宝直达是怎么实现的?
- Z-DArg-GR-pNA,113711-77-6
- CGAL求最小外包矩形
- 3D打印美容设备MagicBox
- 【面向对象】Java面向对象内容
- U盘出现了0字节怎么找回数据
- 圆形标定板的图像校正
热门文章
- mysql的扩容_MySQL的InnoDB的扩容
- 一分钟图情论文:《关于智慧图书馆基本理论的思考》
- 在Android上使用libgdx-box2d物理引擎
- dnfdpl服务器维护了,魔兽世界怀旧服:“卡蛋刀”的方法你知道吗?据说当年都是这么出...
- 男孩学计算机还是高铁好呢,男生学计算机专业有什么优势?
- Qt之设置应用图标、中文显示和窗口大小设置
- 渗透测试工具(最全集合)
- vo类,model类,dto类的作用及划分
- 密码包含字母、数字、特殊符号正则表达式
- 文献综述——关于笔墨”的表现力感受