Web Storage 最早是网页超文本应用技术工作组(WHATWG,Web Hypertext Application Technical 21 Working Group)在 Web Applications 1.0 规范中提出的。这个规范中的草案最终成为了 HTML5 的一部分, 后来又独立成为自己的规范。Web Storage 的目的是解决通过客户端存储不需要频繁发送回服务器的数 据时使用 cookie 的问题。
Web Storage 规范最新的版本是第 2 版,这一版规范主要有两个目标:
提供在 cookie 之外的存储会话数据的途径;
提供跨会话持久化存储大量数据的机制。
Web Storage 的第 2 版定义了两个对象:localStorage 和 sessionStorage。localStorage 是
永久存储机制,sessionStorage 是跨会话的存储机制。这两种浏览器存储 API 提供了在浏览器中不 受页面刷新影响而存储数据的两种方式。2009 年之后所有主要供应商发布的浏览器版本在 window 对象 上支持 localStorage 和 sessionStorage。
注意 WebStorage第1版曾使用过globalStorage,不过目前globalStorage已废弃。
Storage类型
Storage 类型用于保存名/值对数据,直至存储空间上限(由浏览器决定)。Storage 的实例与其他 对象一样,但增加了以下方法。
clear():删除所有值;不在 Firefox 中实现。
getItem(name):取得给定 name 的值。
key(index):取得给定数值位置的名称。
removeItem(name):删除给定 name 的名/值对。
setItem(name, value):设置给定 name 的值。
getItem()、removeItem()和 setItem()方法可以直接或间接通过 Storage 对象调用。因为每
个数据项都作为属性存储在该对象上,所以可以使用点或方括号操作符访问这些属性,通过同样的操作 来设置值,也可以使用 delete 操作符删除属性。即便如此,通常还是建议使用方法而非属性来执行这 些操作,以免意外重写某个已存在的对象成员。
通过 length 属性可以确定 Storage 对象中保存了多少名/值对。我们无法确定对象中所有数据占用 的空间大小,尽管 IE8 提供了 remainingSpace 属性,用于确定还有多少存储空间(以字节计)可用。
sessionStorage对象
sessionStorage 对象只存储会话数据,这意味着数据只会存储到浏览器关闭。这跟浏览器关闭时 会消失的会话 cookie 类似。存储在 sessionStorage 中的数据不受页面刷新影响,可以在浏览器崩溃 并重启后恢复。(取决于浏览器,Firefox 和 WebKit 支持,IE 不支持。)
因为 sessionStorage 对象与服务器会话紧密相关,所以在运行本地文件时不能使用。存储在 sessionStorage 对象中的数据只能由最初存储数据的页面使用,在多页应用程序中的用处有限。
因为 sessionStorage 对象是 Storage 的实例,所以可以通过使用 setItem()方法或直接给属 性赋值给它添加数据。下面是使用这两种方式的例子:
// 使用方法存储数据 sessionStorage.setItem("name", "Nicholas");
// 使用属性存储数据
sessionStorage.book = "Professional JavaScript";
所有现代浏览器在实现存储写入时都使用了同步阻塞方式,因此数据会被立即提交到存储。具体 API 的实现可能不会立即把数据写入磁盘(而是使用某种不同的物理存储),但这个区别在 JavaScript 层 面是不可见的。通过 Web Storage 写入的任何数据都可以立即被读取。
老版 IE 以异步方式实现了数据写入,因此给数据赋值的时间和数据写入磁盘的时间可能存在延迟。 对于少量数据,这里的差别可以忽略不计,但对于大量数据,就可以注意到 IE 中 JavaScript 恢复执行的 速度比其他浏览器更快。这是因为实际写入磁盘的进程被转移了。在 IE8 中可以在数据赋值前调用 begin()、之后调用 commit()来强制将数据写入磁盘。比如:
// 仅适用于IE8
sessionStorage.begin();
sessionStorage.name = "Nicholas"; sessionStorage.book = "Professional JavaScript"; sessionStorage.commit();
以上代码确保了”name”和”book”在 commit()调用之后会立即写入磁盘。调用 begin()是为了保 证在代码执行期间不会有写入磁盘的操作。对于少量数据,这个过程不是必要的,但对于较大的数据量, 如文档,则可以考虑使用这种事务性方法。
对存在于 sessionStorage 上的数据,可以使用 getItem()或直接访问属性名来取得。下面是使 用这两种方式的例子:
注意 Storage 类型只能存储字符串。非字符串数据在存储之前会自动转换为字符串。 注意,这种转换不能在获取数据时撤销。
// 使用方法取得数据
let name = sessionStorage.getItem("name");
// 使用属性取得数据
let book = sessionStorage.book;
可以结合 sessionStorage 的 length 属性和 key()方法遍历所有的值:
for (let i = 0, len = sessionStorage.length; i
这里通过 key()先取得给定位置中的数据名称,然后使用该名称通过 getItem()取得值,可以依 次访问 sessionStorage 中的名/值对。
也可以使用 for-in 循环迭代 sessionStorage 的值:
for (let key in服务器托管网 sessionStorage){
let value = sessionStorage.getItem(key);
alert(`${key}=${value}`);
}
每次循环,key 都会被赋予 sessionStorage 中的一个名称;这里不会返回内置方法或 length 属性。
要从 sessionStorage 中删除数据,可以使用 delete 操作符直接删除对象属性,也可以使用 removeItem()方法。下面是使用这两种方式的例子:
// 使用 delete 删除值
delete sessionStorage.name;
// 使用方法删除值 sessionStorag服务器托管网e.removeItem("book");
sessionStorage 对象应该主要用于存储只在会话期间有效的小块数据。如果需要跨会话持久存储 数据,可以使用 globalStorage 或 localStorage。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
Trigger 概述 Trigger指定事件监听器检测到事件时发生的情况。主要由TriggerTemplate、TriggerBinding和Interceptor组成。 TriggerTemplate定义在spec.t服务器托管网emplate字段上,支持引…