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>

来源：oschina

链接：https://my.oschina.net/u/4400630/blog/4474188

标签

webSQL

html5

javascript