JavaScript 第二十六篇 Web存储机制

时间：2023-05-29 18:30:02 | 来源：网站运营

时间：2023-05-29 18:30:02 来源：网站运营

JavaScript 第二十六篇 Web存储机制：Web Storage 最早是在 Web 超文本应用技术工作组（WHAT-WG）的 Web 应用 1.0 规范中描述的。

这个规范的最初的工作最终成为了 HTML5 的一部分。Web Storage 的目的是克服由 cookie 带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage 的两个主要目标是：

• 提供一种在 cookie 之外存储会话数据的途径；
• 提供一种存储大量可以跨会话存在的数据的机制。

Storage 类型

Storage 类型提供最大的存储空间（因浏览器而异）来存储名值对儿。Storage 的实例与其他对 象类似，有如下方法。

• clear()： 删除所有值；Firefox 中没有实现 。
• getItem(name)：根据指定的名字 name 获取对应的值。
• key(index)：获得 index 位置处的值的名字。
• removeItem(name)：删除由 name 指定的名值对儿。
• setItem(name, value)：为指定的 name 设置一个对应的值。

Storage 类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串。

sessionStorage 对象

sessionStorage 对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。这个对象 就像会话 cookie，也会在浏览器关闭后消失。存储在 sessionStorage 中的数据可以跨越页面刷新而 存在，同时如果浏览器支持，浏览器崩溃并重启之后依然可用（Firefox 和 WebKit 都支持，IE 则不行）。

因为 seesionStorage 对象绑定于某个服务器会话，所以当文件在本地运行的时候是不可用的。存 储在 sessionStorage 中的数据只能由最初给对象存储数据的页面访问到，

IE8的强制写入：

//只适用于 IE8sessionStorage.begin();sessionStorage.name = "Nicholas";sessionStorage.book = "Professional JavaScript";sessionStorage.commit();

globalStorage 对象

作为最初的 Web Storage规范的一部分，这个对象的目的是跨越会话存储数据，但有特定的访问限制。要使用globalStorage，首先要指定哪些域可以访问该数据。可以通过方括号标记使用属性来实现，如以下例子所示。

//保存数据globalStorage["wrox.com"].name = "Nicholas";//获取数据var name = globalStorage["wrox.com"].name;在这里，访问的是针对域名 http://wrox.com 的存储空间。globalStorage 对象不是 Storage 的实例， 而具体的 globalStorage["http://wrox.com"]才是。这个存储空间对于 http://wrox.com 及其所有子域都是可以 访问的。可以像下面这样指定子域名。

//保存数据globalStorage["www.wrox.com"].name = "Nicholas";//获取数据var name = globalStorage["www.wrox.com"].name;对 globalStorage 空间的访问，是依据发起请求的页面的域名、协议和端口来限制的。例如，如 果使用 HTTPS 协议在 http://wrox.com 中存储了数据，那么通过 HTTP 访问的 http://wrox.com 的页面就不能访问 该数据。同样，通过 80 端口访问的页面则无法与同一个域同样协议但通过 8080 端口访问的页面共享数 据。这类似于 Ajax 请求的同源策略

如果不使用 removeItem() 或 者 delete 删除，或者用户未清除浏览器缓存，存储在 globalStorage 属性中的数据会一直保留在磁盘上。这让 globalStorage 非常适合在客户端存储文 档或者长期保存用户偏好设置。

localStorage 对象

localStorage 对象在修订过的 HTML 5 规范中作为持久保存客户端数据的方案取代了 globalStorage。与 globalStorage 不同，不能给 localStorage 指定任何访问规则；规则事先就 设定好了。要访问同一个 localStorage 对象，页面必须来自同一个域名（子域名无效），使用同一种 协议，在同一个端口上。这相当于 globalStorage[location.host]。

由于 localStorage 是 Storage 的实例，所以可以像使用 sessionStorage 一样来使用它。

storage 事件

Storage 对象进行任何修改，都会在文档上触发storage事件。当通过属性或setItem()方法保存数据，使用 delete操作符或removeItem()删除数据，或者调用clear()方法时，都会发生该事件。这个事件的 event 对象有以下属性。

• domain：发生变化的存储空间的域名。
• key：设置或者删除的键名。
• newValue：如果是设置值，则是新值；如果是删除键，则是 null。
• oldValue：键被更改之前的值。

IndexedDB

web中的数据库！

Indexed Database API，或者简称为 IndexedDB，是在浏览器中保存结构化数据的一种数据库。 IndexedDB 是为了替代目前已被废弃的 Web SQL Database API（因为已废弃，所以本书未介绍）而出现 的。IndexedDB 的思想是创建一套 API，方便保存和读取 JavaScript 对象，同时还支持查询及搜索。

IndexedDB 设计的操作完全是异步进行的。因此，大多数操作会以请求方式进行，但这些操作会在 后期执行，然后如果成功则返回结果，如果失败则返回错误。差不多每一次 IndexedDB 操作，都需要你 注册 onerror 或 onsuccess 事件处理程序，以确保适当地处理结果。

创建：

var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB ||window.webkitIndexedDB;

打开或者创建一个IndexedDB

var request, database;request = indexedDB.open("admin");request.onerror = function(event){ alert("Something bad happened while trying to open: " + event.target.errorCode);};request.onsuccess = function(event){ database = event.target.result;};在这两个事件处理程序中，event.target 都指向 request 对象，因此它们可以互换使用。如果响 应的是 onsuccess 事件处理程序，那么 event.target.result 中将有一个数据库实例对象（IDBDatabase），这个对象会保存在 database 变量中。如果发生了错误，那 event.target.errorCode 中将 保存一个错误码，表示问题的性质。以下就是可能的错误码（这个错误码适合所有操作）。

• IDBDatabaseException.UNKNOWN_ERR(1)：意外错误，无法归类。
• IDBDatabaseException.NON_TRANSIENT_ERR(2)：操作不合法。
• IDBDatabaseException.NOT_FOUND_ERR(3)：未发现要操作的数据库。
• IDBDatabaseException.CONSTRAINT_ERR(4)：违反了数据库约束。
• IDBDatabaseException.DATA_ERR(5)：提供给事务的数据不能满足要求。
• IDBDatabaseException.NOT_ALLOWED_ERR(6)：操作不合法。
• IDBDatabaseException.TRANSACTION_INACTIVE_ERR(7)：试图重用已完成的事务。
• IDBDatabaseException.ABORT_ERR(8)：请求中断，未成功。
• IDBDatabaseException.READ_ONLY_ERR(9)：试图在只读模式下写入或修改数据。
• IDBDatabaseException.TIMEOUT_ERR(10)：在有效时间内未完成操作。
• IDBDatabaseException.QUOTA_ERR(11)：磁盘空间不足。

默认情况下，IndexedDB 数据库是没有版本号的，最好一开始就为数据库指定一个版本号。为此， 可以调用 setVersion()方法，传入以字符串形式表示的版本号。同样，调用这个方法也会返回一个请 求对象，需要你再指定事件处理程序。

if (database.version != "1.0"){ request = database.setVersion("1.0"); request.onerror = function(event){ alert("Something bad happened while trying to set version: " + event.target.errorCode); }; request.onsuccess = function(event){ alert("Database initialization complete. Database name: " + database.name + ", Version: " + database.version); };} else { alert("Database already initialized. Database name: " + database.name + ", Version: " + database.version);}

对象存储空间

在建立了与数据库的连接之后，下一步就是使用对象存储空间①。如果数据库的版本与你传入的版 本不匹配，那可能就需要创建一个新的对象存储空间。在创建对象存储空间之前，必须要想清楚你想要 保存什么数据类型。

假设你要保存的用户记录由用户名、密码等组成，那么保存一条记录的对象应该类似如下所示：

var user = { username: "007", firstName: "James", lastNa me: "Bond", password: "foo"}; var store = db.createObjectStore("users", { keyPath: "username" });

事务

跨过创建对象存储空间这一步之后，接下来的所有操作都是通过事务来完成的。在数据库对象上调 用 transaction()方法可以创建事务。任何时候，只要想读取或修改数据，都要通过事务来组织所有 操作。在最简单的情况下，可以像下面这样创建事务①。

var transaction = db.transaction();

如前所述，这些事务都是以只读方式访问数据。要修改访问方式，必须在创建事务时传入第二个参 数，这个参数表示访问模式，用 IDBTransaction 接口定义的如下常量表示：READ_ONLY（0）表示只 读，READ_WRITE（1）表示读写，VERSION_CHANGE（2）表示改变。IE10+和 Firefox 4+实现的是 IDBTransaction，但在 Chrome 中则叫 webkitIDBTransaction，所以使用下面的代码可以统一接口：

var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;

var transaction = db.transaction("users", IDBTransaction.READ_WRITE);

取得了事务的索引后，使用 objectStore()方法并传入存储空间的名称，就可以访问特定的存储 空间。然后，可以像以前一样使用 add()和 put()方法，使用 get()可以取得值，使用 delete()可以 删除对象，而使用 clear()则可以删除所有对象。get()和 delete()方法都接收一个对象键作为参数， 而所有这 5 个方法都会返回一个新的请求对象。例如：

示例:

var request = db.transaction("users").objectStore("users").get("007");request.onerror = function(event){ alert("Did not get the object!");};request.onsuccess = function(event){ var result = event.target.result; alert(result.firstName); //"James"};