html5提供的客户端存储数据的方法,HTML5的离线储存怎么使用,工作原理能不能解释一下
支持离线Web应用开发是HTML5的另一个重点。所谓离线Web应用，就是在设备无法上网的情况下，仍然可以运行的应用。
开发离线Web应用程序有几个步骤。首先，确保应用知道设备是否可以访问互联网，以便在下一步执行正确的操作。然后，应用程序还必须能够访问某些资源(图像、Javascript、CSS等)。)，只有这样才能正常工作。最好有一个用户可以保存数据的本地空间，能不能上网也不妨碍读写。
HTML5及其相关API使得开发离线应用成为可能。
离线检测
为了知道设备是在线还是离线，HTML5定义了一个navigator.onLine属性。该属性的值为true表示设备可以上网，为false表示设备脱机。
If (navigator.onLine) {//正常工作} else {//离线时执行任务}由于navigator.onLine存在一定的兼容性问题，所以除了navigator.onLine属性之外，HTML5还定义了onLine和offline两个事件，以更好地判断网络是否可用。
当网络在离线和在线之间切换时，在窗口对象上触发这两个事件：
window . addevent listener( online ，function(){//工作正常})；window . addevent listener( offline ，function(){//离线时执行任务})；在实际应用中，页面加载后最好通过navigator.onLine获取初始状态。然后，通过上述两个事件确定网络连接状态是否改变。当触发上述事件时，navigator.onLine属性的值也将发生变化，但必须手动轮询该属性以检测网络状态的变化。
应用缓存
HTML5的应用缓存，简称appcache，是专门为开发离线Web应用而设计的。Appcache是与浏览器缓存分离的缓存区。要在此缓存中保存数据，可以使用清单文件列出要下载和缓存的资源。描述文件示例：
然后在html中引用cache manifest # comment file . jsfile . CSS:
htmlmanifest=的MIME类型。/xxx.manifest xxx.manifest文件必须是text/cache-manifest。
API的核心是applicationCache对象，它有一个status属性，该属性的值是常量，表示应用缓存的当前状态如下：
0:无缓存，即没有与页面相关的应用程序缓存。1:空闲，即应用程序缓存没有更新。2:正在检查，即正在下载描述文件，正在检查更新。3:下载，即应用缓存正在下载描述文件中指定的资源。4:更新完成，即应用缓存已经更新了资源，所有资源都已经下载，可以通过swapCache()使用。5:废弃，即应用程序缓存的描述文件
检查：当浏览器寻找应用程序缓存的更新时触发错误；在检查更新或下载资源的过程中出现错误时触发noupdate当检查描述文件并且文件中没有变化时，触发下载；当下载应用缓存资源时触发进程；在下载应用程序缓存的过程中不断触发updaterea。Dy:当页面的新应用缓存被下载并可以通过swapCache()使用时触发：当应用缓存完全可用时触发。一般来说，这些事件会随着页面的加载按上述顺序触发。还可以通过调用update()方法来手动触发上述事件。
数据存储
Cookie
HTTP Cookie通常直接称为Cookie，用于在客户端存储会话信息。该标准要求服务器向任何HTTP请求发送Set-Cookie HTTP头信息作为响应的一部分，其中包含会话信息。回复标题示例：
HTTP/1.1 200没问题
内容类型：文本/html
Set-Cookie: name=value
其它题头：其它题头值
然后浏览器设置cookie的会话信息，然后为每个请求添加一个Cookie HTTP头，将信息发送回服务器，如下所示：
GET /index.html HTTP/1.1
Cookie:名称=值
其它题头：其它题头值
发送回服务器的附加信息可以用来唯一地验证客户来自哪个请求。
完整的cookie包括：
名称：唯一标识cookie的名称。必须是URL编码的。Value:存储在cookie中的字符串值。必须是URL编码的。域：cookie对哪个域有效。Path:对于指定域中的路径，应该向服务器发送一个cookie。到期时间：一个时间戳，指示cookie应该被删除的时间。安全标志：如果指定，cookie将仅在使用SSL连接时发送到服务器。复制代码如下：set-cookie:name=value；domain=www . lai xiangran . cn；path=/；expires=2018年10月29日星期一03:53:10 GMT；安全；
基本用法
在JavaScript中操作cookie有些复杂，因为document.cookie属性以不同的使用方式显示不同的行为。
当用于获取属性值时，document.cookie返回当前页面上所有可用的cookie字符串，即一系列用分号分隔的键值对，如下所示：
document . cookie//name 1=value 1；name2=value2name3=value3当用于设置值时，document.cookie属性将设置一个新的cookie字符串以添加到现有的cookie集合中，并且不会像普通的对象设置属性那样覆盖原始cookie的值，除非设置的cookie的名称已经存在，如下所示：
cookie的名称不存在。文档；cookie= name 4=value 4 //name 1=value 1；name2=value2name3=value3name4=value4//而不是name4=value4cookie的名称存在于文档中；cookie= name 3=value 4 //name 1=value 1；name2=value2name3=value4从上面的代码可以看出，我们读取或修改或删除指定的cookie值并不直观和方便，所以我们可以封装一些方法来方便我们对cookie的操作：
var CookieUtil={ get:function(name){ var cookieName=encodeURIComponent(name)=，cookieStart=document . cookie . index of(cookieName)，cookieValue=null，cookieEndif(cookieStart-1){ cookieEnd=document . cookie . index of(；)，cookieStart)；if(cookieEnd==-1){ cookieEnd=document . cookie . length；} cookieValue=decodeURIComponent(document . cookie . substring(cookieStart cookiename . length，cookieEnd))；}返回cookieValue}，set: function (name，value，expires，path，domain，secure){ var cookieText=encodeURIComponent(name)= encodeURIComponent(value)；if(expires instance of Date){ cookieText=；expires= expires . togmtstring()；} if(path){ cookieText=；path=“path；} if(domain){ cookieText=；domain=“domain；} if(secure){ cookieText=；安全；} document.cookie=cookieText}，unset: function (name，path，domain，secure) { this.set(name，，new Date(0)，path，domain，secure)；}};用法：
//Set cookiecookieutil . Set( name ， lai )；CookieUtil.set(sex ， man )；//读取cookiecookieutil . get( name )；// lai cookieutil . get( sex )；// man //Delete cookiecookieutil . unset( name )；cookieutil . unset( sex )；//设置cookie，包括其路径、域、过期日期cookie util.set (name 、 lai 、/、 www.laixiangran.cn ，new date())；大小限制
每个域的cookies总数是有限的，不同的浏览器有所不同。cookies数量上限为IE6以下20个，IE7以上50个，火狐50个，Opera 30个，Safari和Chrome没有限制。cookie的大小也是有限制的，大部分浏览器都是4096B左右。Web Storage
Web存储的目的是克服cookie带来的一些限制。当需要在客户端对数据进行严格控制时，没有必要不断地将数据发送回服务器。Web存储的两个主要目标是：提供一个在cookie之外存储会话数据的路径。提供一种机制来存储跨会话存在的大量数据。Web存储主要定义了两种对象：sessionStorage和localStorage，是存储对象的实例。这两个对象之间的差异如下：
SessionStorage:存储特定于会话的数据，即数据只保留到浏览器关闭。大部分数据存储大小限制在2.5M，少数浏览器限制在5M或不限制。LocalStorage:保存数据，直到被JavaScript删除或用户清除浏览器缓存。大部分数据存储大小限制在5M以内，少数浏览器限制在2.5M或没有限制。存储类型有以下方法：
Clear():删除所有值。GetItem(name):根据指定的名称name获取相应的值。Key(index):获取索引位置的值的名称。RemoveItem(name):删除由name指定的键值对。SetItem(name，value):为指定的名称设置相应的值，该值为字符串。对sessionStorage和localStorage的操作将触发存储事件，该事件具有以下属性：
Domain:被改变的存储空间的域名。Key:设置或删除键名。NewValue:如果是设定值，则是新值；如果是删除键，则为空。OldValue:更改密钥之前的值。IndexedDB
索引数据库API，简称IndexedDB，是在浏览器中存储结构化数据的数据库。思路是创建一套API，方便保存和读取JavaScript对象，也支持查询和搜索。
IndexedDB设计的操作是完全异步的。因此，大多数操作将根据请求执行。
基本用法
var indexed db=window . indexed db window . msiindeded db window . mozin indexed db window . WebKit indexed db，//Get indexed db request，store，database，users=[ { username: 007 ，firstName: James ，lastName: Bond ，password: foo }，{ username: ace ，firstName: John ，lastName: Smith ，password: bar }]；//打开数据库request=indexed db . Open( example )；//注册onerror和onsuccess事件请求。on error=function (event) {alert(尝试打开时发生了不好的事情： event . target . error code )；};request . on success=function(event){ database=event . target . result；//操作数据库initializeDatabase()；};函数initializeDatabase(){ if(database . version！=1.0) {//设置数据库版本号request=database . Set version( 1.0 )；request . on error=function(event){ alert(尝试设置版本时发生了不好的事情： event . target . error code )；};request . on success=function(event){//用users=database . createobjectstore( users ，{keypath: username})创建对象存储空间storevar i=0，len=users.lengthWhile (i len) {//插入新值store . add(users[I])；} alert(数据库首次初始化。数据库名称： database.name ，版本： database . Version)；};} else { alert(数据库已经初始化。数据库名称： database.name ，版本： database . Version)；//transaction()创建一个事务，objectStore()将存储空间传入transaction request=database . transaction( users )。ObjectStore(“用户”)。get( 007 )；request . on success=function(event){ alert(event . target . result . first name)；};}}限制
类似于Web存储，只能通过相同的源(相同的协议、域名、端口)页面操作，无法实现跨域的信息共享。火狐的最大尺寸是50M，移动端的火狐最大尺寸是5M，所以不允许本地文件访问。Chrome的最大大小为5M，允许本地文件访问。这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。