当前位置:编程学习 > html/css >>

HTML5本地存储详解

HTML5 storage提供了一种方式让网站能够把信息存储到你本地的计算机上,并再以后需要的时候进行获取。这个概念和cookie相似,区别是它是为了更大容量存储设计的。

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

1、sessionStorage

检测

!!window.sessionStorage;

常用方法

.key = value

.setItem(key,value)

.getItem(key)

.removeItem(key)

.clear()

[javascript]
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

检测值得变化,浏览器支持不好。

说明:

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

检测

!!window.localStorage;

方法和sessionStorage相同

说明:

local storage把只把数据存储在了客户端使用,不会发送的服务器上(除非你故意这样做)。
而且对于某一个域下来说,local storage是共享的(多个窗口共享一个“数据库”)。
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
举例

[javascript]
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.  */   

3、Database Storage

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

A、打开链接

[javascript]
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、执行查询


[javascript]
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.  });    

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

Chrome支持; firefox(测试时版本4.01)不支持;IE8不支持。
D、示例

[javascript]
1.  //创建数据库   
2.  var db = openDatabase("users", "1.0", "用户表", 1024 * 1024);    
3.  if(!db){   
4.      alert("Failed to connect to database.");    
5.  } else {   
6.      alert("connect to database 'K'.");    
7.  }   
8.     
9.  // 创建表 www.zzzyk.com    
10. db.transaction( function(tx) {    
11.     tx.executeSql(   
12.         "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)",    
13.       

补充:web前端 , HTML 5 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,