html5储存技术.doc

Localstorage和SessionStorage介绍localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。操作命令localStorage.setItem(userName,admin);localStorage里给userName赋值为adminocalStorage.getItem(userName);在localStorage里提取userName的值localStorage.removeItem(userName);删除userName key和值localStorage.clear();清空localStorage中全部数据localStorage.userName=admin;alert(localStorage.userName);另外一种方式设置和读取localStorage里的数据sessionStorage和localStorage的操作命令相同，区别在于数据存储时间限制什么是应用程序缓存（Application Cache）？HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。应用程序缓存为应用带来三个优势：离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。搭建Application Cache使用环境离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的。对于Tomcat需要修改 /conf/web.xml文件，添加如下MIMEType配置: manifest text/cache-manifest 注意，manifest中内容必须和manifest文件后缀名一致。一个典型的manifest文件应该类似这样：CACHE MANIFEST/必须以这个开头 version 1.0 /最好定义版本，更新的时候只需修改版本号 CACHE: m.png test.js test.css NETWORK: * FALLBACK online.html offline.html 其中CACHE指定需要缓存的文件；NETWORK指定只有通过联网才能浏览的文件，*代表除了在CACHE中的文件；FALLBACK每行分别指定在线和离线时使用的文件要让manifest管理存储。有了manifest文件后，还需要在html标签中定义manifest属性，如下： 5、通过JS动态控制更新应用在离线后将保持缓存状态，除非发生以下某种情况：用户清除了浏览器对您网站的数据存储。清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。缓存状态:window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态：var appCache = window.applicationCache; switch (appCache.status) case appCache.UNCACHED: / UNCACHED = 0 return UNCACHED; break; case appCache.IDLE: / IDLE = 1 return IDLE; break; case appCache.CHECKING: / CHECKING = 2 return CHECKING; break; case appCache.DOWNLOADING: / DOWNLOADING = 3 return DOWNLOADING; break; case appCache.UPDATEREADY: / UPDATEREADY = 4 return UPDATEREADY; break; case appCache.OBSOLETE: / OBSOLETE = 5 return OBSOLETE; break; default: return UKNOWN CACHE STATUS; break; ; 要以编程方式更新缓存，请先调用 applicationCache.update()。此操作将尝试更新用户的缓存（前提是已更改清单文件）。最后，当applicationCache.status 处于 UPDATEREADY 状态时，调用 applicationCache.swapCache() 即可将原缓存换成新缓存。var appCache = window.applicationCache; appCache.update(); / Attempt to update the users cache. . if (appCache.status = window.applicationCache.UPDATEREADY) appCache.swapCache(); / The fetch was successful, swap in the new cache. 请注意：以这种方式使用 update() 和 swapCache() 不会向用户提供更新的资源。此流程只是让浏览器检查是否有新的清单、下载指定的更新内容以及重新填充应用缓存。因此，还需要对网页进行两次重新加载才能向用户提供新的内容，其中第一次是获得新的应用缓存，第二次是刷新网页内容。好消息是，您可以避免重新加载两次的麻烦。要使用户更新到最新版网站，可设置监听器，以监听网页加载时的 updateready 事件：/Check if a new cache is available on page load. window.addEventListener(load, function(e) window.applicationCache.addEventListener(updateready, function(e) if (window.applicationCache.status = window.applicationCache.UPDATEREADY) / Browser downloaded a new app cache. / Swap it in and reload the page to get the new hotness. window.applicationCache.swapCache(); if (confirm(A new version of this site is available. Load it?) window.location.reload(); else / Manifest didnt changed. Nothing new to server. , false); , false); 什么是Web SQL Database？在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序的性能，减轻了服务器端的负担，使Web时代重新回到了“客户端为重，服务器为轻”的时代。在这其中，一项非常重要的功能就是数据库的本地存储功能。在HTML5中内置了一个可以通过SQL语言来访问的数据库。在HTML4中，数据库只能放在服务器端，只能通过服务器来访问数据库，但是在HTML5中，可以就像访问本地文件那样轻松的对内置的数据库进行直接访问。现在，像这种不需要存储在服务器上的，被称为“SQLite”的文件型SQL数据库已经得到了很广泛的利用，所以HTML5中也采用了这种数据库来作为本地数据库。操作命令打开数据库openDatabase方法可以打开已经存在的数据库，不存在则创建：var db = openDatabase(mydatabase, 2.0, my db, 2 * 1024);openDatabasek中五个参数分别为：数据库名、版本号、描述、数据库大小、创建回调。创建回调没有也可以创建数据库。执行查询database.transaction()函数用来查询，下面将在mydatabase数据库中创建表t1： var db = openDatabase( mydatabase , 1.0, Test DB, 2 * 1024 * 1024); db.transaction(function (tx) tx.executeSql(CREATE TABLE IF NOT EXISTS t1 (id unique, log); );插入操作 var db = openDatabase(mydatabase, 2.0, my db, 2 * 1024); db.transaction(function (tx) tx.executeSql(CREATE TABLE IF NOT EXISTS t1 (id unique, log); tx.executeSql(INSERT INTO t1 (id, log) VALUES (1, foobar); tx.executeSql(INSERT INTO t1 (id, log) VALUES (2, logmsg); );在插入新记录时，我们还可以传递动态值，如： var db = openDatabase( mydatabase , 2.0, my db, 2 * 1024); db.transaction(function (tx) tx.executeSql(CREATE TABLE IF NOT EXISTS t1 (id unique, log); tx.execut