HTML5

本地存储详解

 

在网上看到大牛写的以为值得学习，分享给你们

 HTML5storage提供了一种方式让网站可以把信息存储到你本地的计算机上，并再之后须要的时候进行获取。这个概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候cookie都会被发送过去。HTML5的storage是存储在你的计算机上，网站在页面加载完毕后能够经过Javascript来获取这些数据。

一、sessionStorage

检测

!!window.sessionStorage;

经常使用方法

.key = value

.setItem(key,value)

.getItem(key)

.removeItem(key)

.clear()

1.  window.sessionStorage.name = 'rainman';           // 赋值
2.  window.sessionStorage.setItem('name','cnblogs');  // 赋值
3.  window.sessionStorage.getItem('name');            // 取值
4.  window.sessionStorage.removeItem('name');         // 移除值
5.  window.sessionStorage.clear();                    // 删除全部sessionStorage

 

事件：

window.onstorage

检测值得变化，浏览器支持很差。

 

说明：

 

 

1. cookie的存储限制在了4k以内，相比来讲，session storage有了更大的存储空间，但至于具体多大，这要参照浏览器厂商的具体实现。
2. cookie有一个机制，就是在每次客户端请求服务器的时候都会将cookie发送给服务器，这无疑会作不少没必要要的操做，由于并非每次请求服务器都须要cookie的全部信息，而session storage很好的解决了这个问题，它不是采起自动发送的方式，这样就减小了没必要要的工做。
3. 经过sessionStorage所存储数据的生命周期，和Session相似，关闭浏览器（或标签页）后数据就不存在了。但刷新页面或使用“前进”、“后退按钮”后sessionStorage仍然存在。
4. session storage每一个窗口的值都是独立的（每一个窗口都有本身的数据），它的数据会随着窗口的关闭而消失，窗口间的sessionStorage也是不能够共享的。
5. setItem中的key、value使用的是字符串的形式进行存储的。也就是说若是有以下的代码：setItem(‘count’, 1);经过getItem(‘count’) + 5 获得的将不是预期的6(整数)，而是’16’(字符串)。
6. 再次使用setItem设置已经存在的key的value时，新的值将替代旧的值。
7. 当存储中的数据发生改变时，会触发相应的事件（window.onstorage），但目前各浏览器对此事件的支持并不完善，暂时能够忽略。

二、localStorage

检测

!!window.localStorage;

方法和sessionStorage相同

说明：

1. local storage把只把数据存储在了客户端使用，不会发送的服务器上（除非你故意这样作）。
2. 并且对于某一个域下来讲，local storage是共享的（多个窗口共享一个“数据库”）。
3. localStorage用于持久化的本地存储，除非主动删除数据，不然数据是永远不会过时的。

举例

1.  //结合JSON.stringify使用更强大
2.  var person = {'name': 'rainman', 'age': 24};
3.  localStorage.setItem("me", JSON.stringify(person));
4.  JSON.parse(localStorage.getItem('me')).name;    // 'rainman'
5.
6.  /**
7.   * JSON.stringify，将JSON数据转化为字符串
8.   *     JSON.stringify({'name': 'fred', 'age': 24});   // '{"name":"fred","age":24}'
9.   *     JSON.stringify(['a', 'b', 'c']);               // '["a","b","c"]'
10.  * JSON.parse，反解JSON.stringify
11.  *     JSON.parse('["a","b","c"]')                    // ["a","b","c"]
12.  */

 

三、Database Storage

对简单的数据存储，使用sessionStorage和localStorage可以很好地完成，可是在对琐碎的关系数据进行处理以外，它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。

A、打开连接

1.  var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000);    // 打开连接
2.  if(!db) { alert("Failed to connect to database."); }                         // 检测链接是否建立成功

 

以上代码建立了一个数据库对象 db，名称是 Todo，版本编号为0.1。db 还带有描述信息和大概的大小值。若是须要，这个大小是能够改变的，因此没有必要预先假设容许用户使用多少空间。

毫不能够假设该链接已经成功创建，即便过去对于某个用户它是成功的。为何一个链接会失败，存在多个缘由。也许用户代理出于安全缘由拒绝你的访问，也许设备存储有限。面对活跃而快速进化的潜在用户代理，对用户的机器、软件及其能力做出假设是很是不明智的行为。好比，当用户使用手持设备时，他们可自由处置的数据可能只有几兆字节。

B、执行查询

 

1.  db.transaction( function(tx) {
2.      tx.executeSql(
3.          "INSERT INTO ToDo (label, timestamp) values(?, ?)",
4.          ['lebel', new Date().getTime()],
5.          function(tx2, result){ alert('成功'); },
6.          function(tx2, error){ alert('失败:' + error.message); }
7.      );
8.  });

 

1. 执行SQL语句使用database.transaction()函数，该函数只有一个参数，负责执行查询的函数。
2. 该函数具备一个类型事务的参数（tx）。
3. 该事务参数（tx）具备一个函数：executeSql()。这个函数使用四个参数：
   表示查询的SQL字符串；插入到查询中问号所在处的字符串数据；一个成功时执行的函数；一个失败时执行的函数。
4. 执行成功的函数有两个参数：tx2，事务性参数；result，执行的返回结果，结构如图
5. 执行成功的函数也有两个参数：tx2，事务性参数；error，错误对象，结构如图 

C、其它

• Chrome支持； firefox（测试时版本4.01）不支持；IE8不支持。