Web 存储

Web Storage

介绍

Web storage 是在web上存储数据的功能，这里的存储是针对客户端来说的. 具体说分为两种:

• seesionStorage
  数据存储在 session 对象中。session，是指用户打开浏览器窗口浏览网站，从进入网站到关闭
  这个窗口所经过的这段时间。seesion 对象可以用来保存这段时间所有的数据。
• localStorage
  近数据持久化在客户端本地，即使浏览器关闭了，该数据也会存在，下次打开浏览器访问，数据也
  会存在。

用法

它们两个有非常相似的 API , 它们主要存储 key-value 结构:

sessionStorage	localStorage	功能
setItem(key,value)	setItem(key,value)	保存数据
getItem(key)	getItem(key)	获取数据
removeItem(key)	removeItem(key)	移除数据
窗口关闭	clear()	清空数据

它们两个共同监听 window.storage 事件，当 sessionStorage 和 localStorage 数组发生改
变的时候执行回调。示例代码:
window.addEventListener('storage', function(event){ //当 storage 的数据发生变化是执行 });
在事件处理函数中，事件 event 对象有下面几个属性

• event.key 在 storage 中数据被修改的键值
• event.oldValue 在 storage 中数据被修改前的值
• event.newValue 在 storage 中数据被修改后的值
• event.url 在 storage 中页面URL地址
• evnet.storageArea 当前变动的 sessionStorage 或 localStorage

注: 它们两个的 value 值不能接受JSON对象，只能存储字符串。所有保存对象的时候我们可以借助
JSON.stringify 和 JSON.parse 这两个方法来实现。

WebSql

介绍

html5 中大大丰富了客户端本地可以存储内容，添加了很多功能将原本必须保存在服务器上的数据转为保存在客户端，从而提供 Web 程序的性能，减轻服务器的负担。WebSql 的规范使用的是SQLLite，但可悲的是 Firefox 和 IE 浏览器都不支持， W3C 官方在 2011 年 11 月声明已经不再维护 Web SQL Database 规范，由于其广泛的实现程度，了解这些 API 对 Web 开发还是非常有必要的。

用法

提供了三个重要的API，大致先简单介绍下:

• openDatabase 创建一个访问数据库的对象
• transaction 用来执行事务处理，控制事务提交或回滚
• executeSql 用来执行Sql

接下来我们详细说一下每个API的用法:

1. var db = openDatabase('myDb', '1.0', 'Test DB', 1024);
   该方法有接受四个参数:
   1. 数据库名称
   2. 数据库版本
   3. 数据库描述
   4. 数据库大小。
   方法的返回值是创建后的数据库访问对象，如果该数据库不存在，会自动创建它。

2. db.transaction(function(tx) { tx.executeSql(......); }
   该方法可以接受三个参数:
   1. 事务内容的一个方法(参数为事务上下文对象)
   2. 事务执行成功的回调
   3. 事务失败的回调。
   使用事务处理可以防止在对数据库进行访问的时候和操作的时候不受到外界的干扰，在Web上，同时
   会有好多用户对页面进行访问。

3. tx.executeSql('insert ... values(?)',[name], dataHandler, errorHandler')
   该方法也接受四个参数:
   1. 要执行的sql语句
   2. 用于替换sql语句中 ? 参数
   3. 执行成功的回调函数，回调函数有两个参数，第一个是 transaction对象，第二个是操作结果对象
   4. 回调函数有两个参数，回调函数有两个参数，第一个是 transaction对象，第二个是错误消息