HTML5在客户端存储数据


HTML5在客户端存储数据

在html4及之前的版本中,通常使用cookie存储在用户的客户端,并随浏览器的请求一起发送到服务器的,它有一定的过期时间,过期后自动消失,也制约其发展的因素。

HTML5中增加了两种全新的数据存储方式:Web Storage和Web SQL Database.

一、Web Storage

sessionStorage(没有时间限制的数据存储)
localStorage(针对一个session(记录一 系列状态)的数据存储)

原先数据存储是由cookie完成的,但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率也不高。
在HTML5中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能
HTML5使用JavaScript来存储和访问数据

1. localStorage方法存储的数据没有时间限制

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>存储</title>
</head>
<body>
<script>
localStorage.setItem("ID","12")
// 登录的时候 进行 用户名保存
alert( localStorage.getItem("ID"))
//主页的时候 把保存的用户名 拿出来用
localStorage.removeItem("ID")
//关闭页面的时候 把保存的用户名删除
alert( localStorage.getItem("ID"))
</script>
</body>
</html>

2.sessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后,数据会被删除

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>存储</title>
</head>
<body>
<script>
// 登录的时候 进行 用户名保存
sessionStorage.setItem("name","jack")
//主页的时候 把保存的用户名 拿出来用
sessionStorage.getItem("name")
//关闭页面的时候 把保存的用户名删除
sessionStorage.removeItem("name")
</script>
</body>
</html>

总结:

相同点:都存在客户端
不同点:
1、存储大小
cookie数据大小不能超过4K
sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多, 可以达到5M或更大
2、有效时间
localStorage存储持久数据,浏览器关闭后数据不丢失,除非主动删除数据
sessionStorage数据在当前浏览器窗口关闭后自动删除
cookie设置的cookie过期时间之前一-直有效,即使窗口或浏览器关闭
3、数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存

二、WebSQL数据库

Web SQL定义了三个核心方法

    openDatabase: 这个方法使用现有的数据库或者新建的数据库创建一 个数据库对象
    transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚
    executeSql: 这个方法用于执行实际的SQL查询

openDatabase ()打开已经存在的数据库或创建一个新的数据库
(第一个参数 数据库名称,第二个参数 版本号,第三个参数 描述文本,第四个参数 数据库大小)
transaction()函数执行查询操作使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webSQL数据库</title>
<style>
b{
color: red;
}
</style>
</head>
<body>
<div id="status"></div>
<script>
// openDatabase 打开已经存在的数据库或创建一个新的数据库
// 第一个参数 数据库名称
// 第二个参数 版本号
// 第三个参数 描述文本
// 第四个参数 数据库大小
// 第五个参数 回调函数function

var db = openDatabase("mydb","1.0","Test DB",2 * 1024 *1024)
var e_id = 3;
var e_log ="CSS4"
//执行查询操作-插入数据
db.transaction(function(txt){
// 在mydb数据库中创建一个名叫 LOGS 的表 表有2个值 ID 唯一性 log 日志
txt.executeSql("CREATE TABLE IF NOT EXISTS LOGS (id unique,log)")
//给表里面添加值
txt.executeSql("INSERT INTO LOGS (id,log) VALUES (1,'HTML')");
txt.executeSql("INSERT INTO LOGS (id,log) VALUES (2,'css')");

txt.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
})
//执行查询操作-读取数据+数据渲染
db.transaction(function(txt){
txt.executeSql("SELECT * FROM LOGS",[],function(txt,result){
//获取返回来的行的长度(就是有几行) 初始化一个变量 I
var len = result.rows.length, i;
// 输出数据里面有多少条数据
msg = "<p>查询记录条数:"+len+"</p>";
// a += b ==> a = a+b
document.getElementById("status").innerHTML += msg;

//获取每一条数据的LOG值
// 第一个初始化值 第二个条件判断 第三个自增 自身加1
// I=0 表示初始化为0 通过0标示出第一条数据 同理可得 1表示第二条数据 以此类推
// 只能从0开始不能从1开始 因为数组的下标是从0开始的
for(i=0;i<len;i++){
// 把我们从数据库拿到的值进行 循环处理 获取里面每一条数据的log值
msg="<p><b> "+result.rows.item(i).log+" </b></p>";
//意义同上只是繁琐一些
//msg = "<p><b>"+result.rows.item(i).id+":"+result.rows.item(i).log+"</b></p>"
document.getElementById("status").innerHTML += msg;
}
})
})
//执行查询操作-删除数据 删除ID为1的记录
db.transaction(function(txt){
txt.executeSql("DELETE FROM LOGS WHERE id=1")

//txt.executeSql("DELETE FROM LOGS")
})
//执行查询操作-更新数据 更新ID为2的记录
db.transaction(function(txt){
txt.executeSql("UPDATE LOGS SET log=\'css3'\ WHERE id=2");
//可能会出现插不进去的情况需要先删除所有LOGS中数据再进行操作
})

</script>
</body>
</html>

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

HTML5在客户端存储数据

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » HTML5在客户端存储数据
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏