HTML5从入门到精通 HTML5中本地存储及缓存解析-职坐标

HTML5从入门到精通 HTML5中本地存储及缓存解析

沉沙 2018-07-16 来源：阅读 1043 评论 0

摘要：本篇HTML5教程探讨了HTML5中本地存储及缓存，希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。

Web Storage存储机制是对HTML4中的cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5中不再使用它，转而使用改良后的Web Storage存储机制本地数据库： HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库-原本必须要保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度使用cookie存储永久数据存在问题： ▉大小：cookies的大小被限制在4KB ▉带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽。 ▉复杂性：要正确地操纵cookies是很困难的。 Web Storage: ▉sessionStorage: 将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据 ep:

<!doctype html><html><head><meta charset="utf-8"><title>本地存储</title></head><body><h1>Web Storage本地存储示例</h1><input type="text" name="" id="input"><br><br><button onclick="saveStorage('input');">保存数据</button><button onclick="loadStorage('msg')">读取数据</button><p id="msg"></p>

<input type="text" name="" id="input1"><br><br><button onclick="savelocalStorage('input1');">保存数据</button><button onclick="loadlocalStorage('msg1')">读取数据</button><p id="msg1"></p></body><script>// sessionStorage存储数据示例function saveStorage(id){var target = document.getElementById(id);var str = target.value;

sessionStorage.setItem("message",str);

}

function loadStorage(id){var target = document.getElementById(id);var msg = sessionStorage.getItem("message");

target.innerHTML = msg;

}//localStorage存储数据示例function savelocalStorage( id ){var target = document.getElementById(id);var str = target.value;

localStorage.setItem("message1",str);

}function loadlocalStorage( id ){var target = document.getElementById(id);var msg = localStorage.getItem('message1');

target.innerHTML = msg;

}</script></html>

▉localStorage: 将数据保存在客户端本地的硬件设备（通常指硬盘，但也可以是其他硬件设备）中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用读写数据时使用的基本方法。 ▉ sessionStorage 保存数据：sessionStorage.setltem (key，value) | 读取数据：变量=sessionStorage.getItem(key) • ▉ localStorage 保存数据：localStorage.setltem (key，value), 读取数据：变量=localStorage.getltem(key)! 存储和读取大量数据： ▉ saveStorage 函数这个函数比较简单，使用“new Date().getTime()”语句得到了当前的日期和时间戳，然后调用localStorage.setltem方法，将得到的时间戳作为键值，并将文本框中的数据作为键名进行保存。保存完毕后，重新调用脚本中的loadStorage函数在页面上重新显示保存后的数据。 ▉ loadStorage 函数取得保存后的所有数据，然后以表格的形式进行显示。取得全部数据的时候，需要用到 localStorage两个比较重要的属性。 loadStorage .length 所有保存在localStorage中的数据的条数。 localStorage.key (index) 将想要得到数据的索引号作为index参数传入，可以得到 localStorage中与这个索引号对应的数据。譬如想得到第6条数据，传入的index为5 (index是从0开始计算的）。先用loadStorage.length属性获取保存数据的条数，然后做一个循环，在循环内用一个变量，从0开始将该变量作为index参数传入localStorage.key (index)属性，每次循环时该变量加1——通过这种方法，取得保存在localStorage中的所有数据。 ▉ clearStorage 函数将localStorage中保存的数据全部清除。在这个函数中只有一句语句“localStorage.clear()”，调用localStorage的clear方法时，所有保存在localStorage中的数据会全部被清除 ep:

<!doctype html><html><head><meta charset="utf-8"><title>WebStorage存储大量数据</title></head><body><h1>WebStorage存储大量数据</h1><p><input type="text" id="input" /></p><p><button onclick="saveStorage('input');">保存数据</button><button onclick="loadStorage('msg');">获取数据</button><button onclick="clearStorage('msg');">清除数据</button></p><p id="msg"></p></body><script>function saveStorage(id){var target = document.getElementById(id);var str = target.value;var key = new Date().getTime();

localStorage.setItem(key,str);

}function loadStorage(id){var target = document.getElementById(id);var len = localStorage.length;var result = "<table>";

result += "<tr>";

result +="<th>";

result += "key";

result +="</th>";

result +="<th>";

result +="value";

result +="</th>";

result += "</tr>";for(var i=0;i<len;i++){var key = localStorage.key(i);var str = localStorage.getItem(key);

result += "<tr>";

result +="<td>";

result += key;

result += "</td>";

result += "<td>";

result += str;

result += "</td>";

result += "</tr>";

}

result += "</table>";

target.innerHTML = result;

}function clearStorage(id){var target = document.getElementById(id);

localStorage.clear();

target.innerHTML = "";

}</script></html>

将WebStorage作为简易的数据库来利用存储数据？在数据库中，大多数表都分为几列，怎样对列进行管理？怎样对数据进行检索 ★使用json格式，用这种json的格式作为文本保存来保存对象，获取该对象时再通过json格式来获取 ep:

<!doctype html><html><head><meta charset="utf-8"><title>WebStorage做简易数据库示例</title></head><body><h1>WebStorage做简易数据库示例</h1><table><tr><td>姓名：</td><td><input type="text" id="name"></td></tr><tr><td>Email：</td><td><input type="text" id="email"></td></tr><tr><td>电话：</td><td><input type="text" id="tel"></td></tr><tr><td>备注：</td><td><input type="text" id="memo"></td></tr><tr><td></td><td><input type="button" value="保存" onclick="saveStorage();"></td></tr></table><hr><p>检索：<input type="text" id="find"><input type="button" value="检索" onclick="findStorage('msg');"></p><p id="msg"></p></body><script>// 1)从各输入文本框中获取数据

// 2)创建对象，将获取的数据作为对象的属性进行保存 new Object-创建对象 var str = JSON.stringify(data)-将对象转换成json格式的文本数据

// 3)将对象转换成json格式的文本数据

// 4)将文本数据保存在localStorage中function saveStorage(){var data = new Object;

data.name1 = document.getElementById('name').value;

data.email = document.getElementById('email').value;

data.tel = document.getElementById('tel').value;

data.memo = document.getElementById('memo').value;var str = JSON.stringify(data);

localStorage.setItem(data.name1,str);

alert("数据已保存");

}

// 1)从localStorage中，将检索用的姓名作为键值，获取对应的数据

// 2)将获取的数据转换成json对象 var data = JSON.parse(str)-将从localStorage中获取的数据转换成json对象

// 3)取得json对象的各个属性，创建要输出的内容

// 4)将要输出的内容在页面上输出function findStorage( id ){var target = document.getElementById(id);

target.innerHTML = "";var find = document.getElementById('find').value;var str = localStorage.getItem(find);var data = JSON.parse(str);var result = "姓名："+data.name1+"<br>";

result += "Email："+data.email+"<br>";

result += "电话："+data.tel+"<br>";

result += "备注："+data.memo+"<br>";

target.innerHTML = result;

}</script></html>

本地数据库：Webapp测试没有问题
★★★★★Sql语句必须是大写，小写会报错★★★★★
★★★★★firefox不支持，chrom支持★★★★★

SQLLite数据库：不需要存储在服务器上数据库

使用步骤：

▉ 创建访问数据库的对象

openDatabase()创建数据库

var db = openDatabase('mydb','1.0','Test DB',2*1024*1024);

第一个参数为数据库名

第二个参数为版本号

第三个参数为数据库的描述

第四个参数为数据库的大小

该方法返回创建后的数据库访问对象，如果该数据库不存在，则创建该数据库。

▉ 使用事务处理

transaction()执行事务处理，达到在操作完之前，阻止别的用户访问数据库

db.transaction(function(tx){

tx.executeSql('create table if not exists logs (id unique,log)');

});

transaction方法使用一个回调函数为参数，在这个函数中，执行访问数据库的语句

用executeSql执行查询语句：

transaction.executeSql(sqlquery,[],dataHandler,errorHandler);

sqlquery:要执行的sql语句

[]:sql语句中所有使用到的参数的数组

ep:

transaction.executeSql("update people set age=? where name=?",[age,name]);

dataHandler:执行sql语句成功时调用的回调函数

ep:

function dataHandler(transaction,results){//执行sql语句成功时的处理}

transaction:对象

results:执行查询操作时返回的查询到的结果数据集对象

errorHandler:执行sql语句出错时调用的回调函数

ep:

function errorHandler(transaction,errmsg){//执行sql语句出错时的处理}

transaction：transaction对象

errmsg:执行发生错误时的错误信息文字

数据结果集对象：

rows属性：保存了查询到的每条记录

rows.length：记录的条数

rows[index]或rows.Item([index]):取出每条数据

ep：

<!DOCTYPE HTML><html><head><meta charset="utf-8"/><title>HTML5本地存储之本地数据库篇</title></head><body onload="loadAll()"><div class="addDiv"><label for="user_name">姓名：</label><input type="text" id="user_name" name="user_name" class="text"/><br/><label for="mobilephone">手机：</label><input type="text" id="mobilephone" name="mobilephone"/><br/><label for="mobilephone">公司：</label><input type="text" id="company" name="company"/><br/><input type="button" onclick="save()" value="新增记录"/></div><br/><div id="list"></div></body><script type="text/javascript">//打开数据库var db = openDatabase('contactdb', '', 'local database demo', 204800);//保存数据function save() {var user_name = document.getElementById("user_name").value;var mobilephone = document.getElementById("mobilephone").value;var company = document.getElementById("company").value;//创建时间var time = new Date().getTime();

db.transaction(function (tx) {

tx.executeSql('INSERT INTO contact VALUES(?,?,?,?)', [user_name, mobilephone, company, time], onSuccess, onError);

});

}//sql语句执行成功后执行的回调函数function onSuccess(tx, rs) {

alert("操作成功");

loadAll();

}//sql语句执行失败后执行的回调函数function onError(tx, error) {

alert("操作失败，失败信息：" + error.message);

}//将所有存储在sqlLite数据库中的联系人全部取出来function loadAll() {var list = document.getElementById("list");

db.transaction(function (tx) {//如果数据表不存在，则创建数据表

tx.executeSql('CREATE TABLE IF NOT EXISTS contact(name TEXT,phone TEXT,company TEXT,createtime INTEGER)', []);//查询所有联系人记录

tx.executeSql('SELECT * FROM contact', [], function (tx, rs) {if (rs.rows.length > 0) {var result = "<table width='100%' border='1'>";

result += "<tr><th>序号</th><th>姓名</th><th>手机</th><th>公司</th><th>添加时间</th><th>操作</th></tr>";for (var i = 0; i < rs.rows.length; i++) {var row = rs.rows.item(i);//转换时间，并格式化输出var time = new Date();

time.setTime(row.createtime);var timeStr = time.format("yyyy-MM-dd hh:mm:ss");//拼装一个表格的行节点

result += "<tr><td>" + (i + 1) + "</td><td>" + row.name + "</td><td>" + row.phone + "</td><td>" + row.company + "</td><td>" + timeStr + "</td><td><input type='button' value='删除' onclick='del(" + row.phone + ")'/></td></tr>";

}

list.innerHTML = result;

} else {

list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";

}

});

}//删除联系人信息function del(phone) {

db.transaction(function (tx) {//注意这里需要显示的将传入的参数phone转变为字符串类型

tx.executeSql('DELETE FROM contact WHERE phone=?', [String(phone)], onSuccess, onError);

});

}//格式化时间的format函数Date.prototype.format = function (format) {var o = {"M+": this.getMonth() + 1, //month"d+": this.getDate(), //day"h+": this.getHours(), //hour"m+": this.getMinutes(), //minute"s+": this.getSeconds(), //second"q+": Math.floor((this.getMonth() + 3) / 3), //quarter"S": this.getMilliseconds() //millisecond

}if (/(y+)/.test(format)) format = format.replace(RegExp.$1,

(this.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(format))

format = format.replace(RegExp.$1,RegExp.$1.length == 1 ? o[k] :

("00" + o[k]).substr(("" + o[k]).length));return format;

}</script></html>

离线应用程序

离线Web应用程序详情：没有连接internet的时候也能使用web应用程序

本地缓存：

▉为整个Web应用程序服务的

▉只缓存指定缓存的网页

▉可靠，可以控制对哪些内容进行缓存，不对哪些内容进行缓存，还可以用编程的手段来控制缓存的更新，利用缓存对象的各种属性、状态和事件来开发出更为强大的离线应用程序

浏览器缓存：

▉只服务于单个网页

▉任何网页都具有网页缓存

▉不安全，不可靠，不知道网站缓存了哪些网页，以及缓存了网页上的哪些资源

manifest文件 [‘mænɪfɛst]：web应用程序的本地缓存是通过每个页面的manifest文件来管理的

manifest文件是一个简单文本文件，在该文件中以清单的形势列举了需要被缓存或不需要被缓存的资源文件的文件名称，以及这些资源文件的访问路径，可以为每一个页面单独指定一个manifest文件，也可以对整个web应用程序指定一个总的manifest文件

▉在manifest文件中，第一行必须是“CACHE MANIFEST”文字，以把本文件的作用告知给浏览器，即对本地缓存中的资源文件进行具体设置。同时，真正运行或测试离线Web应用程序的时候，需要对服务器进行配置，让服务器支持text/cache-manifest这个MIME类型 (在HTML 5中规定manifest文件的MIME类型是text/cache-manifest)。例如对Apache服务器进行配置的时候，需要找到{apache_home}/conf/mime.types这个文件，并在文件最后添加如下所示的一行代码。

text/cache-manifest manifest

▉编写manifest文件

manifest文件示例-对hello.html网页的manifest文件:

---------------------------------------------

CACHE MANIFEST

#文件的开头必须要书写CACHE MANIFEST

#这个manifest文件的版本号

#version 7

#CACHE指定需要被缓存在本地的资源文件

CACHE：

other.html

hello.js

images/myphoto.jpg

#NETWORK显示指定不进行本地缓存的资源文件 "*"通配符，表示没有在manifest文件中指定的资源文件都不进行本地缓存

NETWORK：

//Lulingniu/NotOffline

NotOffline.asp

#FALLBACK每行指定两个资源文件，第一个资源文件为能够在线访问时使用的资源文件，第二个为不能在线访问时使用的备用资源文件

FALLBACK：

online.js locale.js

CACHE;

newhello.html

newhello.js

---------------------------------------------

★★★★★在指定资源文件的时候，可以把资源文件分为三类，分别是CACHE、NETWORK、 FALLBACK

□ 在CACHE类别中指定需要被缓存在本地的资源文件。为某个页面指定需要本地缓存的资源文件时，不需要把这个页面本身指定在CACHE类别中，因为如果一个页面具有manifest文件，浏览器会自动对这个页面进行本地缓存。

□ NETWORK类别为显式指定不进行本地缓存的资源文件，这些资源文件只有当客户端与服务器端建立连接的时候才能访问。本示例该类别中的为通配符，表示没有在本manifest文件中指定的资源文件都不进行本地缓存。

□ FALLBACK类别中的每行中指定两个资源文件，第一个资源文件为能够在线访问时使用的资源文件，第二个资源文件为不能在线访问时使用的备用资源文件

★★★★★如果没有指定资源文件类型，默认为CACHE类型

★★★★★允许在一个manifest文件中重复写同一类别

▉使用方式：

在web应用程序页面上的html标签的manifest属性中指定manifest文件的url地址

ep:

<html manifest="hello.manifest"></html><html manifest="global.manifest"></html>

设置完成后，将资源文件保存到本地缓存区的基本操作就完成了，当要对本地缓存区的内容进行修改时，只要修改manifest文件就可以，文件被修改后，浏览器可以自动检查manifest文件，并自动更新本地缓存中的内容

浏览器与服务器的交互过程

当使用离线Web应用程序进行工作的时候，有必要理解一下浏览器与服务器之间的交互过程。譬如一个//Lulingniu网站，以index.html为主页，该主页使用index.manifest文件为 manifest文件，在该文件中请求本地缓存index.html、hello.js、hellol.jpg、hello2.jpg这几个资源文件。首次访问//Luliiigniu网站时，它们的交互过程如下所示。

1) 浏览器请求访问httP://Lulingniu。

2) 服务器返回index.html网页。

3) 浏览器解析index.html网页，请求页面上所有资源文件，包括HTML文件、图像文件、 CSS文件、JavaScript脚本文件，以及manifest文件。

4) 服务器返回所有资源文件。

5) 浏览器处理manifest文件，请求manifest中所有要求本地缓存的文件，包括inciex.htnil 页面本身，即使刚才已经请求过这些文件。如果你要求本地缓存所有文件，这将是一个比较大的重复的请求过程。

6) 服务器返回所有要求本地缓存的文件。

7) 浏览器对本地缓存进行更新，存入包括页面本身在内的所有要求本地缓存的资源文件，并且触发一个事件，通知本地缓存被更新。

现在浏览器已经把本地缓存更新完毕。如果再次打开浏览器访问httpWLulingniu网站，而且manifest文件没有被修改过，它们的交互过程会如下所示。

1) 浏览器再次请求访问//Lulingniu。

2) 浏览器发现这个页面被本地缓存，于是使用本地缓存中indeX.html页面。

3) 浏览器解析index.html页面，使用所有本地缓存中的资源文件。

4) 浏览器向服务器请求manifest文件。

5) 服务器返回一个304代码，通知浏览器manifest没有发生变化。

只要页面上的资源文件被本地缓存过，下次浏览器打开这个页面时，总是先使用本地缓存中的资源，然后请求manifest文件。

如果再次打开浏览器时manifest文件已经被更新过了，那么浏览器与服务器之间的交互过程如下所示。

1>浏览器再次请求访问hUp://LuUngnhi。

2) 浏览器发现这个页面被本地缓存，于是使用本地缓存中indeX.html页面。

3) 浏览器解析index.html页面，使用所有本地缓存中的资源文件。

4) 浏览器向服务器请求manifest文件。

5) 服务器返回更新过的manifest文件。

6) 浏览器处理manifest文件，发现该文件已被更新，于是请求所有要求进行本地缓存的资源文件，包括index.html页面本身。

7) 浏览器返回要求进行本地缓存的资源文件。

8) 浏览器对本地缓存进行更新，存入所有新的资源文件。并且触发一个事件，通知本地缓存被更新。

需要注意的是，即使资源文件被修改过了，在上面的第3中已经装入的资源文件是不会发生变化的，譬如图片不会突然变成新的图片，脚本文件也不会突然使用新的脚本文件，也就是说，这时更新过后的本地缓存中的内容还不能被使用，只有重新打开这个页面的时候才会使用更新过后的资源文件。另外，如果你不想修改manifest文件中对于资源文件的设置，但是你对服务器上请求缓存的资源文件进行了修改，那么你可以通过修改版本号的方式来让浏览器认为manifest文件已经被更新过了，以便重新下载修改过的资源文件。

applicationCache对象

▉applicationCahe对象代表了本地缓存，可以用它来通知用户本地缓存中已经被更新，也允许用户手工更新本地缓存

浏览器与服务器的交互过程中，当浏览器对本地缓存进行更新，装入新的资源文件时，会触发applicationCache对象的updateready事件，通知本地缓存已被更新。你可以利用这个事件告诉用户本地缓存已经被更新，用户需要手工刷新页面来得到最新版本的应用程序。

ep:

applicationCache.onUpdateReady = function(){

alert("本地缓存已被更新，您可以刷新页面来得到本程序的最新版本");

}</script>

▉swapCache方法

swapCache方法用来手工执行本地缓存的更新，它只能在applicationCache对象的 updateReady事件被触发时调用，updateReady事件只有在服务器上的manifest文件被更新，并且把manifest文件中所要求的资源文件下载到本地后触发。顾名思义，这个事件的含义是 “本地缓存准备被更新”。当这个事件被触发后，我们可以用swapCache方法来手工进行本地缓存的更新。下面，我们来看一下哪些场合需要使用到这个方法。

☛首先，如果本地缓存的容量非常大（甓如超过100MB),本地缓存的更新工作将需要相对较长的时间，而且还会把浏览器给锁住。这时最好有一个提示，告诉用户正在进行本地缓存的更新，该部分代码如下所示。

applicationCache.onUpdateReady = function () {//本地缓存已被更新，通知用户

alert( "正在更新本地缓存……");

applicationCache. swapCache();

alert("本地缓存已被更新，您可以刷新页面来得到本程序的最新版本。");

}</script>

☛如果不调用swapCache方法，本地缓存将在下一次打开本页面时被更新;

如果调用swapCache方法的话, 本地缓存将会被立刻更新.

因此，你可以使用confirm方法让用户自己选择更新的时机—— 是立刻更新，还是在下次打开画面时再更新，特別是当他们有可能正在页面上执行一个较大的操作的时候。

另外，尽管使用swapCache方法立刻更新了本地缓存，但是并不意味着我们页面上的图像和脚本文件也会被立刻更新，它们都是在重新打开本页面时才会生效

▉applicationCache对象的事件

manifest本地缓存过程：

首次访问//Lulingniu网站：

1) 浏览器请求访问//Lulingniu。

http7/Vulingpi^tw«pCdch«^*^7T^>Vri

IEE

图8-1 swapCache方法示例

2) 服务器返回index.html网页。

3) 浏览器发现该网页具有manifest属性，触发checking事件，检査manifest文件是否存在。不存在时，触发error事件，表示manifest文件未找到，不执行步骤6开始的交互过程。

4) 浏览器解析index.html网页，请求页面上所有资源文件。

5) 服务器返回所有资源文件。

6) 浏览器处理manifest文件，请求manifest中所有要求本地缓存的文件，包括index.html 页面本身，即使刚才已经请求过该文件。如果你要求本地缓存所有文件，这将是一个比较大的重复的请求过程。

7) 服务器返回所有要求本地缓存的文件。

8) 浏览器触发downloading事件，然后开始下载这些资源。在下载的同时，周期性地触发progress事件，开发人员可以用编程的手段获取多少文件已被下载，多少文件仍然处于下载队列等信息。

9) 下载结束后触发cached事件，表示首次缓存成功，存入所有要求本地缓存的资源文件。再次访问//Lulingniu网站，步骤1〜5同上，在步骤5执行完之后，浏览器将核对manifest文件是否被更新，若没有被更新，触发mnipdate事件，步骤6开始的交互过程不会被执行。如果被更新了，将继续执行后面的步骤，在步骤9中不触发cached事件，而是触发 updateready事件，这表示下载结束，可以通过刷新页面来使用更新后的本地缓存，或调用 swapCache方法来立刻使用更新后的本地缓存。

另外，在访问缓存名单时如果返回一个HTTP404错误（页面未找到），或者410错误（永久消失），则触发obsolete事件。

在整个过程中，如果任何与本地缓存有关的处理中发生错误的话，都会触发error事件。可能会触发error事件的情况分为以下几种。

□ 缓存名单返回一个HTTP404错误（页面未找到），或者410错误（永久消失）。

□ 缓存名单被找到且没有更改，但引用缓存名单的HTML页面不能正确下载。

□ 缓存名单被找到且被更改，但浏览器不能下载某个缓存名单中列出的资源。

□ 开始更新本地缓存时，缓存名单再次被更改

浏览器服务器在交互过程中所触发的事件：

<!DOCTYPE HTML><html manifest="applicationCacheEvent.manifest"><head><meta charset="utf-8"/><title>applicationCache事件流程示例</title><script>function init() {var msg = document.getElementById("msg");

applicationCache.addEventListener("checking", msg.innerHTML += "checking<br/>",true);

applicationCache.addEventListener("noupdate", msg.innerHTML += " noupdat.e<br/>", true);

applicationCache.addEventListener("downloading", function () {

msg.innerHTML += "downloading<br/>";

},true);

applicationCache.addEventListener("progress", function () {

msg.innerHTML += " progress<br/>";

},true);

applicationCache.addEventListener("updateready", function () {

msg.innerHTML += " updateready<br/>";

}, true);

applicationCache.addEventListener("cached", function () {