第二十三章 离线应用与客户端存储
2015-12-02 22:49:25 0 举报AI智能生成
第二十三章探讨了离线应用与客户端存储的主题。在这一章中，我们深入了解了如何在没有网络连接的情况下，使应用程序能够正常运行和访问数据。这主要通过将数据存储在用户的设备上实现，这样即使没有网络，应用程序也可以访问这些数据。此外，我们还讨论了如何优化客户端存储，以提高数据访问速度和效率。这一章的内容对于开发者来说非常有价值，因为它可以帮助他们创建出更强大、更灵活的应用程序，无论用户是否处于网络环境中。
作者其他创作
大纲/内容
离线Web应用
作用：在设备不能上网的情况下也可以运行
开发步骤
1. 确定设备是在线还是离线
2. 必须能访问一定的资源
3. 必须有一块本地空间用于保存数据
离线检测
navigator.onLine属性值为true表示设备能上网，值为false表示设备离线，有兼容性问题
online/offline：当网络从离线变为在线或从在线变为离线时，分别在window上触发这两个事件
子主题
应用缓存(appcache)
即从浏览器缓存中分出一块缓存区，使用一个描述文件，列出要下载和缓存的资源
将描述文件与页面关联起来，可在中的manifest属性中指定这个文件的路径
API
核心是applicationCache对象，对象有一个status属性，表示应用缓存的当前状态
status属性值
0：无缓存
1：闲置
2：检查中
3：下载中
4：更新完成
5：废弃
数据存储
Cookie
在客户端用于存储回话信息的，其要求服务器对任意HTTP请求发送Set-Cookie HTTP头作为响应的一部分
限制
每个域的cookie总数有限，IE6最多20个；Firefox最多50个；Opera最多30个
浏览器对cookie的尺寸也有限制，最好整个cookie长度限制在4095B以内
构成
名称
最好区分大小写，必须被URL编码
值
存储在cookie中的字符串值，必须被URL编码
域
cookie对于哪个域是有效的
路径
对于指定域中的那个路径，应该向服务器发送cookie
失效时间
表示cookie何时应该被删除的时间戳(即，何时应该停止向服务器发送这个cookie)
安全标志(secure)
指定后，cookie只有使用SSL连接时才发送到服务器
js中的cookie
document.cookie属性，其会因为使用的方式不同而表现出不同的行为
当用来获取属性值时，该属性返回当前页面可用的所有cookie的字符串(名值对)，需使用decodeURIComponent()解码
当用于设置值时，该属性可设置一个新cookie字符串，且会被解释并添加到现有的cookie集合中
基本cookie操作
读取、写入和删除
子cookie
是存放在单个cookie中的更小段的数据，作用是绕开浏览器单域名下的cookie数限制
注：在cookie中应尽量少存储信息，以避免影响性能
IE用户数据
用户数据允许每个文档最多128KB数据，每个域名最多1MB数据
若使用持久化用户数据，需使用CSS在某个元素上指定userData行为
元素使用userData行为后，然后可使用setAttribute()保存数据，将数据提交到浏览器缓存，再调用save()设置保存到数据空间的名字
页面载入后，可使用load()通过数据空间名称来获取数据，然后使用getAttribute()调用数据，可通过removeAttribute()删除某元素指定数据
Web存储机制
作用：1. 提供一种在cookie之外存储会话数据的途径；2. 提供一种存储大量可以跨会话存在的数据的机制
Storage类型
提供最大的存储空间来存储名值对，只能存储字符串
方法
clear()：删除所有值
getItem(name)：根据指定的名字获取对应的值
key(index)：获得index位置处的值的名字
removeItem(name)：删除由name指定的名值对
setItem(name, value)：为指定的name设置一个对应的值
sessionStorage对象
存储特定于某个会话的数据，可以跨页面刷新而存在，但浏览器关闭后数据就会消失
限制：5MB/2.5MB/没有限制
globalStorage对象
目的是跨会话存储数据，但有特定的访问限制，访问时一定要指定一个域名
若不能确定域名，可使用location.host作为属性名比较安全
若没有使用removeItem()或delete删除，或未清除浏览器缓存，储存在globalStorage属性中的数据会一直保留
localStorage对象
可持久保存客户端数据，若访问同一个localStorage对象，域名、协议、端口必须一致
限制：一般5MB
storage事件的属性
domain：发生变化的存储空间的域名
key：设置或者删除的键名
newValue：若是设置值，则是新值；若是删除键，则是null
oldValue：键被更改之前的值
IndexedDB
一种类似SQL数据库的结构化数据存储机制，数据保存在对象存储空间中
0 条评论
下一页
为你推荐
查看更多
