html5 web储存

HTML5 提供了两种在客户端储存数据的新方法。
localStorage 没有时间限制的数据储存（ 永久本地储存 ）
localStorage 用来永久储存用户web端的数据。且数据不会随着Http请求发送到后台服务器，储存数据大小也不用考虑，因为HTML5的标准中要求浏览器至少可以支持到4MB。
sessionStorage 四种操作方法
setItem(key,value)     添加本地储存数据。两个参数，数据名称(key)，和数据值(value)。
getItem(key)     通过key获取相应的value。
removeItem(key)     通过key删除本地数据。
clear()     清除数据。

<script type="text/javascript">
// 添加key-value 数据到 sessionStorage
localStorage.setItem("demokey", "http://www.baidu.com");
//通过key来换取value
var dt=localStorage.getItem("demokey");
alert(dt);
//清楚是有key-value数据
//localStorage.clear();
alert(localStorage.length);
</script>
 
sessionStorage 针对一个 session 的数据储存 （ 会话级别的本地储存 ）
通过此对象可以直接操作储存在浏览器中的会话级别 WebStorage。储存在 sessionStorage 中的数据首先是Key-Value形式的，它和浏览器当前会话相关，当会话结束后，数据会自动清除，和未设置过期时间的 Cookie 类似。
sessionStorage 四种操作方法
setItem(key,value)     添加本地储存数据。两个参数，数据名称(key)，和数据值(value)。
getItem(key)     通过key获取相应的value。
removeItem(key)     通过key删除本地数据。
clear()     清除数据。
<script type="text/javascript">
// 添加key-value 数据到 sessionStorage
sessionStorage.setItem("demokey", "http://www.baidu.com");
// 通过key获取value
var dt = sessionStorage.getItem("demokey");
alert(dt);
//清空是有的key-value数据。
//sessionStorage.clear();
alert(sessionStorage.length)
</script>

 

高级本地数据库
 
基本步骤
1、openDatabase方法，创建一个访问数据库的对象。
2、使用第一步创建的数据库访问对象来执行transaction方法，通过此方法可以设置一个开启事务成功的事件响应方法，在事件响应方法中可以执行SQL。
3、通过executeSql方法执行查询，查询可以是：CRUD。
 
方法的参数及用法
（1） openDatabase 方法
// Demo:获取或者创建一个数据库，如果数据库不存在则创建。
var dataBase = openDatabase("student", "1.0", "学生表", 1024*1024， function(){});
 
// openDatabase 方法打开一个已经存在的数据库，如果数据库不存在，就创建一个。 初次调用时创建数据库，以后就是建立连接了。
// 参数解释
// 1、数据库名称
// 2、数据库的版本号，也可以不填
// 3、对数据库的描述
// 4、设置分配的数据库大小 (单位是kb)
// 5、回调函数(可省略)
（2）db.transaction方法可以设置一个回调函数，此函数可以接受一个参数，就是开启事务的对象。通过此对象可以进行执行Sql脚本。
（3）通过executeSql方法执行查询。
ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
 
// sqlQuery 需要具体执行的sql语句，可以是create,select,update,delete
// [value1,value2..] sql语句中所有使用到的参数数组，在executeSql方法中，将s>语句中所要使用的参数先用"?"代替，然后依次将这些参数组成数组放在第二个参数中
// dataHandler 执行成功是调用回调函数，通过该函数可以获得查询结果集。 返回两个参数，trans和执行结果。
// errorHandler 执行失败时调用的回调函数。 返回两个参数，trans和执行结果。
 
 
 
 
 
如果您发觉哪里写的不对，或理解不了，可留言。本人将在第一时间改正错误，及解释相关信息。
 
posted @ 2017-11-18 13:55  萧亮  阅读(77)  评论(0)    收藏  举报