html5储存技术.docVIP

Localstorage和SessionStorage介绍 localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。 localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。 sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。 操作命令 localStorage.setItem(userName,admin); localStorage里给userName赋值为admin ocalStorage.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配置: mime-mapping extensionmanifest/extension mime-typetext/cache-manifest/mime-type /mime-mapping 注意，extensionmanifest/extension中内容必须和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属性，如下： !DOCTYPE html html lang=en manifest=test.manifest head meta charset=UTF-8 title/title /head body /body /html 5、通过JS动态控制更新 应用在离线后将保持缓存状态，除非发生以下某种情况： 用户清除了浏览器对您网站的数据存储。 清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。 缓存状态: window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态：