一、本地存储
本地存储可分为4类
Local Storage :永久存储:数据将保持在硬盘中,即使浏览器被关闭了,该数据仍然存在,
下次打开浏览器访问该网站时仍然可以继续使用
Session Storage :临时存储:数据会随着浏览器的关闭而消失。
Indexed Database:NOSql,相当于一个key和value的集合,实现了NOSql的存储方式
Web SQL Database:实现了传统的基于sql语句的数据库操作,关系数据库
1、提交表单发送到服务器的信息
1)、带name的可用表单元素
2)、url
3)、客户端请求头部信息
4)、cookie
2、客户端本地存储概要
顾名思义客户端本地存储就是将信息存储在客户端电脑上,cookie就是一种典型的传统客户端存储,长期以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势,作为Web应用程序而言,新一代的HTML标准对数据的本地存储提出了更高的要求。传统的Web数据存储方式一直来使用的是Cookie,但Cookie有以下缺陷:
a)、cookie会被附加在每个HTTP请求中,所以无形中增加了流量。
b)、由于在HTTP请求中的cookie是明文传递的,所以安全性成问题。
c)、Cookie的大小限制在4 KB左右,容量达不到要求。
HTML5中的Web Storage,称为Web本地存储,在Web客户端储存数据的功能,用键值对的形式保存数据,曾经属于HTML5的规范,目前已经被独立出来形成单独的规范体系。本地存储优势:
a)、统一的标准,兼容性高(IE8、各大浏览器支持)
b)、数据存储量大
c)、无需安装插件
d)、减少网络流量
e)、更加适合移动端
HTML5 提供了四种在客户端存储数据的新方法,即localStorage 、sessionStorage、globalStorage、Web Sql Database。 前面三个适用于存储较少的数据,而Web Sql Database适用于存储大型的,复杂的数据,我习惯把前面的三个称之为小存储。 IE8、Firefox3.6、Chrome5、Safari4、Opera10,事实证明各个浏览器在API方面的实现基本上一致,存在一定的兼容性问题,但不影响正常使用。
在chrome浏览器中可以使用开发者工具查看到各种不同的本地存储方式,如下图所示:
Web SQL Database 和 Indexed Database 都是在客户端存储大量结构化数据的解决方案。Web SQL Database 实现了传统的基于 SQL 语句的数据库操作,而 Indexed Database 实现了 NoSQL 的存储方式。
Web Storage 这种用于存储 (key, value),一般两者都是字符串;
IndexDB 是增强型的 Web Storage,也是存储 (key, value);
Web SQL 则是 SQLite,一个完整的关系型数据库,可以执行 SQL。
WebSQL是SQLite在浏览器中的实现,所以它是一种关系型数据库。由于W3C对其规范定义不够理想,各家浏览器有各自实现,有浏览器兼容问题;
IndexDB是一种key-value类型的非关系数据库(NoSQL)
3、客户端操作Cookies
1.3.1、获得操作cookies的库
https://github.com/js-cookie/js-cookie
1.3.2、操作cookies
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cookie</title> </head> <body> <input type="button" name="add" id="add" value="添加" /> <input type="button" name="get" id="get" value="读取" /> <input type="button" name="remove" id="remove" value="清除" /> <script src="js/js.cookie-2.1.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="../js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $("#add").click(function(){ Cookies.set('name','小明',{expires:7}); }) $("#get").click(function(){ alert(Cookies.get('name')) }) $("#remove").click(function(){ Cookies.remove('name') }) </script> </body> </html>
结果:
添加的结果:
读取的结果:
清除的结果:
4、localStorage
说明:将数据保存在客户端本地的硬件设备(通常指硬盘,但也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。
操作localStorage
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>本地永久存储:localStorage</title> </head> <body> <input type="button" value="添加" onclick="add()"/> <input type="button" value="读取" onclick="get()"/> <input type="button" value="删除" onclick="del()"/> <script type="text/javascript"> //添加 function add(){ //方法一 localStorage.setItem("name1","张三"); localStorage.setItem("1","张三1"); //方法二 localStorage["name2"]="李四"; //方法三 localStorage.name3="王五"; //存储对象 var str={name:"赵六",age:18} //序列化:把对象转换为String(因为JSON只能存储String) localStorage.str=JSON.stringify(str); } //读取 function get(){ //方法一 console.log(localStorage.getItem("name1")); //方法二 console.log(localStorage["name2"]); //方法三 console.log(localStorage.name3); //读取对象 //反序列化 var str=JSON.parse(localStorage.str) console.log(str.name); console.log(str.age); console.log(str); } //删除 function del(){ //根据Key值删除 localStorage.removeItem("name") //删除所有 localStorage.clear(); } </script> </body> </html>
结果:
添加的结果:
读取的结果:
移除的结果:
5、sessionStorage
将数据临时保存在客户端session对象中。session对象就是会话对象,session中存储的数据独立于每个客户,该数据会随着浏览器的关闭而消失。
sessionStorage的操作api与localStorage基本一样,在不手动清除的情况下localStorage永久保存,而sessionStorage只是临时暂存。
sessionStorage使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>本地临时存储:sessionStorage</title> </head> <body> <input type="button" value="添加" onclick="add()"/> <input type="button" value="读取" onclick="get()"/> <input type="button" value="删除" onclick="del()"/> <script type="text/javascript"> //添加 function add(){ //方法一 sessionStorage.setItem("name1","张三"); sessionStorage.setItem("1","张三1"); //方法二 sessionStorage["name2"]="李四"; //方法三 sessionStorage.name3="王五"; //存储对象 var str={name:"赵六",age:18} //序列化:把对象转换为String(因为JSON只能存储String) sessionStorage.str=JSON.stringify(str); } //读取 function get(){ //方法一 console.log(sessionStorage.getItem("name1")); //方法二 console.log(sessionStorage["name2"]); //方法三 console.log(sessionStorage.name3); //读取对象 //反序列化 var str=JSON.parse(sessionStorage.str) console.log(str.name); console.log(str.age); console.log(str); } //删除 function del(){ //根据Key值删除 sessionStorage.removeItem("name") //删除所有 sessionStorage.clear(); } </script> </body> </html>
结果:
添加的结果:
读取的结果:
删除的结果:
Web本地存储事件监听
当程序修改localStorage与sessionStorage时将触发全局事件。
当setItem(),removeItem()或者clear() 方法被调用,并且数据真的发生了改变时,就会触发storage事件,如果需要进行监听数据处理,通过以下方法:
window.addEventListener(event,handleEvent, capture)
event:设置成storage
handleEvent:事件处理函数
capture:事件处理顺序,一般设置成false,表示采用冒泡方式处理
handleEvent处理事件的函数会接收到一个StorageEvent对象,该对象有以下属性:
key:被修改的键。
oldValue:修改前的值(如果是增加新的键值,则该属性为null)
newValue:修改后的值(如果是删除键值,则该属性为null)
url/uri:触发当前存储事件的页面的url
注意:storage改变的时候,触发这个事件会调用所有同域下其他窗口的storage事件,不过它本身触发storage即当前窗口是不会触发这个事件的(当然ie这个特例除外,它包含自己本事也会触发storage事件)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获得localStorage的值</title> </head> <body> <script type="text/javascript"> console.log(localStorage.price); window.addEventListener("storage",function(obj){ alert(obj.oldValue+","+obj.newValue+","+obj.url); },true); </script> </body> </html>
运行结果如下:
3.3、cookie、sessionStorage、localStorage比较
6、Web SQL Database
Web SQL Database可以让开发人员使用SQL语句操作客户端浏览器中嵌入的SQLite数据库 ,给开发人员提供了方便。对于简单的数据,使用sessionStorage和localStorage能够很好地完成存取,但是对于处理复杂的关系型数据,它就力不从心了。这也是 HTML 5 的“Web SQLDatabase”API 接口的应用所在。我把它理解成一个Html5环境下可以用Js执行CRUD的Web数据库
三个核心方法
openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。
transaction:这个方法允许我们根据情况控制事务提交或回滚。
executeSql:这个方法用于执行真实的SQL查询。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商品信息</title> <style type="text/css"> #div{ width: 700px; height: 500px; margin:50px auto; border: 1px solid #4169E1; background-color: #FFFFFF; } #tab{ border-collapse: collapse; border-color: aquamarine; } #tab th{ width: 200px; text-align: center; } #fie{ position: relative; top: 50px; border-radius: 30px; } #tables,#deltable{ position: relative; top: 85px; } body{ background-color: #CCCCCC; } </style> </head> <body> <div id="div"> <input type="button" name="tables" id="tables" value="创建表" /> <input type="button" name="deltable" id="deltable" value="删除表" /> <table border="1" id="tab"> <caption><h1>商品信息</h1></caption> <tr> <th>编号</th> <th>名称</th> <th>价格</th> <th>操作</th> </tr> </table> <fieldset id="fie"> <legend>商品操作</legend> <p> <label for="name">商品名称:</label> <input type="text" name="name" id="name" value="" /> </p> <p> <label for="price">商品价格:</label> <input type="text" name="price" id="price" value="" /> </p> <input type="button" name="add" id="add" value="添加" /> <input type="button" name="alter" id="alter" value="修改" /> </fieldset> </div> </body> <script src="../js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //页面加载时调用 $(function(){ databa() //创建/打开数据库 sel() //读取数据库 }) //获取数据库对象 var db; //创建/打开数据库 function databa(){ //(创建名称为commodity,版本为1.0,描述为产品数据库,3M大小的数据库,回调函数) db=openDatabase("commodity",1.0,"商品数据库",1024*1024*3,function(){ alert("数据库创建/打开成功!!!") }) } //创建表 $("#tables").click(function(){ //数据库对象.transaction(function(tx){tx.executeSql(sql语句,[?值],成功时的回调函数,失败时的回调函数)}) db.transaction(function(tx){ tx.executeSql("create table if not exists physics" +"(" +" id integer primary key autoincrement," +" name text not null," +" price double" +")" ,[] ,function(tx,result){ alert("创建成功") } ,function(tx,error){ alert("创建失败") } ) }); }) //删除表 $("#deltable").click(function(){ db.transaction(function(tx){ tx.executeSql( "drop table physics" ,[] ,function(tx,result){ alert("删除成功!!!") } ,function(tx,error){ alert("删除失败!!!") } ) }) }) //添加数据 $("#add").click(function(){ db.transaction(function(tx) { tx.executeSql( "insert into physics(name,price) values(?,?)", [$("#name").val(),$("#price").val()], function(tx, result) { alert("添加数据成功") sel() }, function(tx, error) { alert('添加数据失败' + error.message); }); }); }) //读取数据 function sel(){ //将表格中tr索引大于0的元素删除 $("#tab tr:gt(0)").remove(); db.transaction(function(tx) { tx.executeSql( "select id,name,price from physics", [], function(tx, result) { $.each(result.rows, function(i,obj) { var tr=$("<tr/>"); $("<td/>").text(obj["id"]).appendTo(tr); $("<td/>").text(obj["name"]).appendTo(tr); $("<td/>").text(obj["price"]).appendTo(tr); var del=$("<input type='button' value='删除' οnclick='dels("+obj["id"]+")' />") var up=$("<input type='button' value='编辑' οnclick='up("+obj["id"]+")'/>") $("<td/>").append(del).append(up).appendTo(tr); tr.appendTo("#tab"); }); }, function(tx, error) { }); }); } //修改:获取原数据 var bh=""; function up(id){ bh=id; db.transaction(function(tx){ tx.executeSql( "select name,price from physics where id=?" ,[id] ,function(tx,result){ $.each(result.rows, function(i,obj) { $("#name").val(obj["name"]); $("#price").val(obj["price"]); }); } ,function(tx,error){ } ) }) } //修改 $("#alter").click(function(){ db.transaction(function(tx){ tx.executeSql( "update physics set name=?,price=? where id=?" ,[$("#name").val(),$("#price").val(),bh] ,function(tx,recult){ alert("修改成功!!!") sel() } ,function(tx,error){ alert("修改失败!!!") } ) }) }) //删除数据 function dels(id){ db.transaction(function(tx){ tx.executeSql("delete from physics where id=?" ,[id] ,function(tx,result){ alert("删除成功!!!") sel() } ,function(tx,error){ alert("删除失败!!!") }) }) } </script> </html>
7、IndexedDB
1、ndexedDB由于受到W3C的推崇。浏览器厂商的实现情况要好一些。但由于目前规范说明书还只是处于候选建议阶段。各大浏览器厂商目前的实现还有一些差异化。
IndexedDB是在浏览器中保存结构化数据的一种数据库,为了替换WebSQL(标准已废弃,但被广泛支持)而出现。IndexedDB使用NoSQL的形式来操作数据库,保存和读取是JavaScript对象,同时还支持查询及搜索。
IndexedDB保存的是对象,而不是使用表保存数据。打开数据库使用indexDB.open方法,这方法有两个参数,第一个是数据库名称,第二个是数据版本号。
IndexedDB的操作完全是异步进行的,每一次IndexedDB操作,都需要注册onerror或onsuccess事件处理程序。
2、对象存储空间(ObjectStore)
对象存储空间(ObjectStore)可以想象成关系数据库的表,在初始化DB触发onupgradeneeded时,创建ObjectStore。使用createObjectStore方法,第一个参数是对象名,第二个参数是对象属性,一般是设置keyPath(作为键使用)。
因为对新数据的操作都需要在transaction中进行,而transaction又要求指定object store,所以我们只能在创建数据库的时候初始化object store以供后面使用,这正是onupgradeneeded的一个重要作用
有了数据库后我们自然希望创建一个表用来存储数据,但indexedDB中没有表的概念,而是objectStore,一个数据库中可以包含多个objectStore,objectStore是一个灵活的数据结构,可以存放多种类型数据。也就是说一个objectStore相当于一张表,里面存储的每条数据和一个键相关联。
我们可以使用每条记录中的某个指定字段作为键值(keyPath),也可以使用自动生成的递增数字作为键值(keyGenerator),也可以不指定。选择键的类型不同,objectStore可以存储的数据结构也有差异
不使用—>任意值,但是没添加一条数据的时候需要指定键参数
keyPath—>Javascript对象,对象必须有一属性作为键值
keyGenerator—>任意值(db.createObjectStore('students',{autoIncrement: true});)
都使用—>Javascript对象,如果对象中有keyPath指定的属性则不生成新的键值,如果没有自动生成递增键值,填充keyPath指定属性
3、事务
所有读取或修改数据的操作,都要通过事务来完成。创建事务使用transaction方法,第一个参数是需要访问的ObjectStore,第二个参数是访问模式(readwrite可读可写、readonly只读,默认是只读)。
4、游标查询
使用事务可以直接通过键检索单个对象,而需要检索多个对象时候就需要使用游标。游标是指向结果集的指针,不提前收集结果。游标指针会先指向结果中的第一项,在接到查找下一项指令时,才会指向下一项。
这里有几点要注意:
1. 如果需要修改或删除数据,就需要打开成读写模式。
2. cursor的非空校验是必要的。
3. 修改或删除的操作也是有onsuccess和onerror的,只是在示例中没有写出来。
4. 调用continue才会移动到下一项
另外可以设置游标的键范围和游标的方向,即打开openCursor方法时可以传这两个参数(openCursor(键范围,方向)),第一个参数是object类型,第二个参数是字符串类型。
游标键范围
键范围由IDBKeyRange的实例表示。
IDBKeyRange.only('001'); //只想要键为001的结果 IDBKeyRange.lowerBound('002'); //从键为002开始,到最后 IDBKeyRange.lowerBound('002', true); //从键为002开始,但忽略002,到最后 IDBKeyRange.upperBound('002'); //从头开始,到键为002为止 IDBKeyRange.upperBound('002', true); //从头开始,到键为002为止,但忽略002 IDBKeyRange.bound('001', '005'); //从001开始,到为005为止 IDBKeyRange.bound('001', '005', true, true); //从001开始,到为005为止,但忽略001、005
游标方向
next : 从第一项到最后一项(默认)
prev : 从最后一项到第一项
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IndexedDb:商品信息</title> <style type="text/css"> #div{ width: 700px; height: 500px; margin:50px auto; border: 1px solid #4169E1; background-color: #FFFFFF; } #tab{ border-collapse: collapse; border-color: aquamarine; } #tab th{ width: 200px; text-align: center; } #fie{ position: relative; top: 50px; border-radius: 30px; } #tables,#deltable{ position: relative; top: 85px; } </style> </head> <body> <div id="div"> <table border="1" id="tab"> <caption><h1>商品信息</h1></caption> <tr> <th>编号</th> <th>名称</th> <th>价格</th> <th>操作</th> </tr> </table> <fieldset id="fie"> <legend>商品操作</legend> <p> <label for="name">商品编号:</label> <input type="text" name="id" id="id" value="" /> </p> <p> <label for="name">商品名称:</label> <input type="text" name="name" id="name" value="" /> </p> <p> <label for="price">商品价格:</label> <input type="text" name="price" id="price" value="" /> </p> <input type="button" name="add" id="add" value="添加" /> <input type="button" name="alter" id="alter" value="修改" /> </fieldset> </div> <script src="../js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ databas(); }) var db; //创建数据库、创建表 function databas(){ //创建一个名为commodity,版本为2的数据库 var requst=indexedDB.open("commodity",2); //绑定成功时的回调函数 requst.onsuccess=function(e){ db=e.target.result; console.log("创建数据库成功!!!"); get() } //绑定失败时的回调函数 requst.οnerrοr=function(e){ console.log("错误:"+e.target.errorCode || e.target.error) }; //创建表 requst.onupgradeneeded =function(e){ e.target.result.createObjectStore("commoditys",{"keyPath":"id"}) console.log("创建表成功") } } //读取数据 function get(){ $("#id").val("") $("#name").val("") $("#price").val("") $("#tab tr:gt(0)").remove(); var request=db.transaction("commoditys","readonly").objectStore("commoditys").openCursor(); request.onsuccess=function(e){ var cursor =e.target.result; if(cursor){ var obj=cursor.value; var tr=$("<tr/>") $("<td/>").text(obj.id).appendTo(tr); $("<td/>").text(obj.name).appendTo(tr); $("<td/>").text(obj.price).appendTo(tr); var del=$("<input type='button' value='删除' id='del' οnclick='del(this,"+obj.id+")'>"); var up=$("<input type='button' value='编辑' id='up' οnclick='up(this,"+obj.id+")'>"); $("<td/>").append(del).append(up).appendTo(tr); tr.appendTo($("#tab")); cursor.continue() } } } function text(){ return { id:$("#id").val(), name:$("#name").val(), price:$("#price").val() } } //添加数据 $("#add").click(function(){ var tx=db.transaction("commoditys","readwrite").objectStore("commoditys").add(text()); get() alert("添加成功") }) //获取要修改数据 function up(t,id){ var request=db.transaction("commoditys","readonly").objectStore("commoditys").openCursor(""+id+""); request.onsuccess=function(e){ var cursor =e.target.result; if (cursor) { var obj=cursor.value; $("#id").val(obj.id); $("#name").val(obj.name); $("#price").val(obj.price); } } } //修改数据 $("#alter").click(function(){ var requset=db.transaction("commoditys","readwrite").objectStore("commoditys").put(text()); requset.onsuccess=function(e){ console.log("修改成功") get() } }) //删除数据 function del(t,id){ if(confirm("您确定要删除吗?")){ var requset=db.transaction("commoditys","readwrite").objectStore("commoditys").delete(""+id+""); requset.onsuccess=function(e){ alert("删除成功!!!") get() } requset.onerror=function(e){ alert("删除失败") } } } </script> </body> </html>