HTML5 本地存储解释 HTML5 存储为网站提供了一种在本地计算机上存储信息并在需要时检索信息的方法。 这个概念与cookie类似，不同的是它是为更大容量的存储而设计的。 HTML5 存储为网站提供了一种在本地计算机上存储信息并在需要时检索信息的方法。 这个概念与cookie类似，不同的是它是为更大容量的存储而设计的。 cookie的大小是有限的，每次请求新页面时都会发送cookie。 HTML5的存储是存储在你的电脑上，页面加载后网站可以通过Javascript获取这些数据。 1.SessionStorage检查!!window.sessionStorage; 常用技能.key=value.setItem(key,value).getItem(key).removeItem(key).clear()[javascript]window.sessionStorage.name='rainman'; //形参 window.sessionStorage.setItem('name','cnblogs');//形参 window.sessionStorage.getItem('name');//值 window.sessionStorage.removeItem('name');//移除值 window.sessionStorage.clear();//删除所有sessionStorage 扰动：window.onstorage检查值变化，浏览器支持不好。
说明：cookie的存储限制为4k。 相比之下，sessionstorage的存储空间更大，但至于具体大小，则取决于浏览器厂商的具体实现。 cookie有一种机制，就是每次客户端请求服务器时，都会向服务器发送cookie。 这无疑会做很多不必要的操作，因为并不是每次对服务器的请求都需要cookie的所有信息，而session存储很好的解决了这个问题，它不采取手动发送的形式，减少了不必要的工作。 通过sessionStorage存储的数据的生命周期与Session类似，关闭浏览器（或选项卡）后数据就不存在。 但刷新页面或使用“前进”和“后退按钮”后，sessionStorage仍然存在。 每个会话存储窗口的值都是独立的（每个窗口都有自己的数据），当窗口关闭时其数据就会消失，窗口之间的会话存储不能共享。 setItem中的key和value以字符串的形式存储。 也就是说，如果有如下代码：setItem('count', 1); getItem('count') + 5 得到的结果不会是预期的 6（整数），而是 '16'（字符串）。
当再次使用 setItem 设置现有键的值时，新值将替换旧值。 当storage中的数据发生变化时，会触发相应的storm（window.onstorage），但目前浏览器还不完全支持这个storm，所以暂时可以忽略。 2.检查localStorage!!window.localStorage； 方法与sessionStorage相同说明：localstorage只将数据存储在客户端，不会发送到服务器（除非你故意这样做）。 并且对于某个域来说，localstorage是共享的（多个窗口共享一个“数据库”）。 localStorage 用于持久本地存储。 除非主动删除数据html5 本地存储，否则数据永远不会过期。 示例[javascript]//结合JSON.stringify使用更强大 varperson={'name':'rainman','age':24};localStorage.setItem("me",JSON.stringify(person));JSON .parse(localStorage.getItem('me')).name;//'rainman'5./***JSON.stringify，将JSON数据转换为字符串 *JSON.stringify({'name':'fred', '年龄':24});//'{"name":"fred","age":24}'*JSON.stringify(['a','b','c']);//' [ "a","b","c"]'*JSON.parse，反向 JSON.stringify*JSON.parse('["a","b","c"]')//["a" ,"b","c"]*/3、DatabaseStorage 对于简单的数据存储html5 本地存储，使用sessionStorage和localStorage都可以很好的完成，处理平庸的关系型数据就力不从心了。
而这就是HTML5的“WebSQLDatabase”API套接字的应用所在。 A 打开链接 [javascript]vardb=openDatabase("ToDo","0.1","Alalertoftodoitems.",200000);//打开链接 if(!db){alert("Failedtoconnecttodatabase.");}//检查如果连接成功 创建上面的代码创建了一个数据库对象db，名称为Todo，版本号为0.1。 db还携带描述信息和近似大小值。 如果需要的话这个大小是可以改变的，所以不需要预设允许用户使用多少空间。 永远不应该假设连接已成功建立，即使过去对于用户来说连接是成功的。 连接失败的原因有多种。 事实上，用户代理出于安全原因拒绝您的访问，事实上设备存储空间是有限的。 面对活跃且快速发展的潜在用户代理池，对用户的机器、软件和功能做出假设是不明智的。 例如，当用户使用手持设备时，他们可能只有几兆字节的数据可供使用。 B 执行查询 [javascript]db.transaction(function(tx){tx.executeSql("INSERTINTOToDo(label,timestamp)values(?,?)",['lebel',newDate().getTime()], function ( tx2,结果){alert('成功');},function(tx2,错误){alert('失败:'+error.message);});}); 函数，只有一个参数，负责执行SQL语句，使用database.transaction()函数来执行查询。
该函数有一个交易类型的参数（tx）。 交易参数（tx）有一个函数：executeSql()。 该函数有四个参数：代表查询的 SQL 字符串； 要插入到问号所在查询中的字符串数据； 成功时执行的函数； 以及失败时执行的函数。 成功执行的函数有两个参数：tx2，事务参数； result，执行的返回结果，结构如图所示。 成功执行的函数也有两个参数： tx2，事务参数； error，错误对象，结构如图C所示。其他Chrome支持； firefox（测试时版本4.01）不支持； IE8不支持。 D example[javascript]//创建数据库 vardb=openDatabase("users","1.0","user table", 1024*1024);if(!db){alert("Failedtoconnecttodatabase.");}else{alert( "connecttodatabase'K'.");}8.//创建表HYPERLINK "http://www.2cto.com"www.2cto.comdb.transaction(function(tx){tx.executeSql("CREATE TABLEIFNOTEXISTSusers(idREALUNIQUE) , nameTEXT)",[],function(){alert('创建用户表成功');},function(tx,error){alert('创建用户表失败:'+error.message);});} ) ;18.//插入数据 db.transaction(function(tx){tx.executeSql("INSERTINTOusers(id,name)values(?,?)",[Math.random(),'space'],function( ) {alert('插入数据成功');}, function(tx,error){alert('插入数据失败:'+error.message);});}); 28.29.//查询30.db.transaction( function(tx){31.tx.executeSql(32."SELECT*FROMusers",[],33.function(tx,result){34.varrows=result.rows,长度=行.length,i=0;35 .for(i;i
