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对象，第二个是错误消息