html5 交易客户端,HTML5中的客户端存储

scale_AI

于 2021-06-10 15:11:19 发布

阅读量124

点赞数

文章标签： html5 交易客户端

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

HTML5新增了很多诱人的新特性，比如语义化的HTML标签、还有现在要聊的离线缓存等多种客户端存储手段。

离线缓存(Application Cache)

HTML5新增的离线缓存为支持离线web应用开发提供了一套解决方案。要开发离线web应用，首先就需要获取用户的在线信息。通过navigator.onLine属性可以检测当前用户是否在线。

Application Cache就是从浏览器的缓存中分出来的一块缓存区。要想在这块缓存区中保存数据，在html标签中通过给出manifest属性指定Manifest文件。浏览器会下载缓存Manifest文件中指定缓存的文件，每次从缓存中加载资源后，在在线的情况下检查server端的Manifest文件。一旦Manifest文件有更新，就会重新下载更新。

Manifest文件的格式1

15CACHE MANIFEST

#如果缓存文件内容有更新，可以通过修改以下版本号通过浏览器更新

#version n.n

CACHE:

#需要缓存的文件

...

NETWORK:

#每次需要通过网络拉取的文件(下面的*号表示除上面CACHE列出的文件其他所有文件都是通过网络获取)

FALLBACK：

#离线状况下的代替文件(下面例子表示在离线状况下所有文件替代为offline.html)

/ offline.html

清单文件可使用任何文件扩展名，但必须以正确的 MIME 类型提供，这里只需要将manifest 的文件类型定义为 text/cache-manifest 即可。

下面是常见的服务器系统的配置方式(这里的 manifest 文件后缀是 .manifest)：让 Apache 支持 manifest

新建或者编辑现有的 .htaccess 文件，在里面加上一行：1AddType text/cache-manifest .manifest

让 Nginx 支持 manifest

修改 mime.types 文件，在里面增加 manifest 文件的映射：1text/cache-manifest manifest

让 Tomcat 支持 manifest

修改 web.xml 文件，在里面增加：1

manifest

text/cache-manifest

让 GAE 支持 manifest

修改 app.yaml，在里面增加：1

4- url: /mystaticdir/(.*.manifest)

static_files: mystaticdir/1

mime_type: text/cache-manifest

upload: mystaticdir/(.*.manifest)

注意：使用manifest属性的当前请求页面即使没有出现在Manifest文件中即不要求被缓存，最终也会被浏览器缓存下来。

不建议带参数访问含有mainfest属性的页面，例如index.html和index.html?renew=1会被认为是不同文件并被分别缓存下来。

applicationCache对象常用属性和方法window.applicationCache.status：获取当前缓存的状态

获取到的状态值可能是

window.applicationCache.UNCACHED = 0

window.applicationCache.IDLE = 1

window.applicationCache.CHECKING = 2

window.applicationCache.DOWNLOADING = 3

window.applicationCache.UPDATEREADY = 4

window.applicationCache.OBSOLETE = 5

window.applicationCache.update()：更新缓存

window.applicationCache.swapCache()：将缓存里面的内容更新为重新向server拉取的内容

与离线缓存有关的事件

oncached：在缓存完毕时触发

onchecking：检查更新时触发

ondownloading：下载更新内容时触发

onerror：发生错误时触发

onnoupdate：manifest文件内容没有更新时触发

onobsolete：客户端在请求Manifest文件时获取不到Manifest文件时触发

onprogress：下载资源的过程中触发

onupdateready：缓存更新完毕时触发，接下来就可以调用swapCache方法来更新缓存中的内容

离线缓存存在的不足更新存在延迟，需等到下次刷新才生效；

每一次缓存的文件出现更新，都会从服务器端将Manifest文件中指定的缓存文件全部重新获取一遍，存在一定的性能问题。

数据存储

Cookie最初是用于在客户端存储会话信息的，它并不是HTML5中新增的客户端存储手段，但我觉得还是有必要在这里聊一聊。通常一个由服务器端返回的设置cookie的形式如下：1Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=xx.com; path=/; secure

expires字段指定cookie的失效时间，默认情况下当浏览器会话结束时就会将cookie删除；

path指定的路径表示对于该路径，客户端应该向服务器发送该cookie，设置了这个值，则对于同一个域名下的其他路径则不会发送该cookie；

最后的安全标志表示只有在使用SSL连接的时候才将该cookie发送到服务器端。此外服务器端发送的cookie可能会包含HttpOnly这个选项，它表示只有服务器有权访问和修改该cookie，而客户端则不具备此权限。该选项在一定程度上可以避免受到XSS攻击。

而在以后客户端想该域名下的服务器发送请求时，都会通过以下请求首部发送cookie：1Cookie: name=value

在javascript中可以直接通过document.cookie访问到当前页面所有cookie构成的字符串(每个cookie的形式类似服务器端设置cookie的格式)。也可以通过该属性设置当前页面的cookie。

Cookie的不足：

1、每个特定的域名下可以生成的cookie数量有限制，一个域名下存储的cookie总大小不能超过4KB。

2、每次你在该域名下的子域中请求一个新的页面时，Cookie 都会被发送过去，这在无形中浪费了带宽，而且也存在着一定的安全隐患。

3、cookie 需要指定作用域，不可以跨域调用。

HTML5中的Web存储

Web存储的主要目标是提供一种在cookie之外存储会话数据的途径；同时提供一种存储大量可以跨会话存在的数据的机制。之所以HTML5会提出新的web存储机制，它的目标就在于解决以前web存储过程中存在的一些问题：解决可以存储的数据大小的问题，例如cookie只能在每个域名下存储不超过4KB大小的数据

解决cookie在每次向子域名发送请求时会被顺带发送过去的问题，该问题存在一定的安全隐患

通过规范解决web存储的跨浏览器问题

HTML5中的Web存储主要包含了两个对象：sessionStorage和localStorage。

两种Storage类型具有的属性和方法length：返回当前Storage对象包含的键值对的数量

getItem(name)：获取属性名name对应的值

setItem(name, value)：设置新的键值对

key(index)：返回指定位置的属性名称

removeItem(name)：删除由name指定的键值对

sessionStorage

sessionStorage对象用于存储某个会话的数据，该数据只保持到浏览器关闭。存储在sessionStorage中的数据在页面刷新之后依然可以访问得到。在不同的标签页之间不能共享存储在sessionStorage对象中的数据。

存储数据的两种方法：1

3sessionStorage.setItem(name, value);

sessionStorage.name = value;

同样获取数据也有两种方法：1

3var value = sessionStorage.getItem(name);

var value = sessionStorage.name;

另外可以通过该对象上length属性和key方法(根据位置获取对应的属性名称)来遍历sessionStorage对象上的值：1

4for(var i=0, len=sessionStorage.length; i

var key = sessionStorage.key(i);

var value = sessionStorage.getItem(key);

}

删除数据也有两种方法：1

3sessionStorage.removeItem(name);

delete sessionStorage.name;

localStorage

localStorage对象在HTML5规范中作为在客户端新的数据持久化方案。要访问同一个localStorage对象，页面必须来自同一个域名(子域名无效)，使用同一种协议，同一个端口。存取数据的方法与前面类似。如果不使用removeItem删除键值对，则存储在localStorage对象中的键值对会一直保留在磁盘中。

缺陷：子域名不能共享存储数据

使用场景：使用localStorage对象存储的本地数据，可以减少网络传输，适用于弱网络的环境下(高延迟，低带宽)

IE中的userData

IE10及以下版本均支持userData，数据最终保存在一个XML文件中。要使用userData，首先需要使用CSS在某个元素上指定userData行为：1

一旦定义了元素的userData行为，就可以使用setAttribute()方法在元素上面保存数据了。为了将数据提交到浏览器缓存中，还必须调用save(dataSpace)方法保存到指定的数据空间。1

3var dataStore = document.getElementById("dataStore");

dataStore.setAttribute("name", "javascript");

dataStore.save("nameInfo");

页面载入之后，就可以使用load方法指定同样的数据空间名称来获取数据：1

2dataStore.load("nameInfo");

dataStore.getAttribute("name"); // "javascript"

删除存储的数据可以使用removeAttribute(name)方法，删除之后还需要调用save(dataSpace)方法来保存修改。