您现在的位置是：首页 > 前端学习 > Web前端Web前端

本地存储（第九章）(图文)

第十三双眼睛2020-02-13【Web前端】人已围观

简介随着web应用的发展，需要在用户本地浏览器存储更多的应用数据。传统应用使用cookie存储的方案已经不能满足发展的要求，而使用服务器端存储的方案更是一种无奈的选择，HTML5的webAPI是一个理想的解决方案，可以在客户端存储更多的数据，则可以借助web sql databaseAPI来实现，可以使用的SQL语句完成更复杂的存储和查询。
本章主要知识点如下：
1认识sessionStorage和localStorage
2学会存储JSON对象的数据
3掌握本地数据库web sql database

web storage简介
web storage的诞生与cookie的不足有很大的关系，我们分别就这方面的问题讨论。

cookie简介
对于web开发者来说，都会记得在cookie在客户端存储数据方面的表现优越，甚至至今在作为主要的客户端存储来使用。
cookie可以用于在程序间传递少量数据，对于web应用来说，它是一个在服务器和客户端之间来回传送文本值得内置机制，服务器可以根据cookie来追踪用户在不同页面得访问信息，正因为其卓越得表现，目前在web应用中cookie得到了广泛得应用。
尽管如此，cookie仍然有如下不足得地方：
1大小得限制，cookie的大小被限制在4KB,在web的富应用环境中，不能接收文件或邮件那样的大数据。
2带宽的限制，只要有涉及cookie的请求，cookie数据会在服务器和浏览器之间传送，这样，无论访问哪个页面，cookie都会消耗带宽。
3安全风险，由于cookie会频繁的在网络中传送，而且数据在网络上是可见的，所以在不加密的情况下是有安全风险的。
4操作复杂，在客户端的浏览器中，使用javascript操作cookie数据是比较复杂的，但是服务器端可以方便的操作cookie数据

web storage简介
web storage可以在客户端保存大量数据，而且可以通过其提供的接口，访问数据非常方便，但是web storage的诞生，不是为了替代cookie，而是为了弥补cookie的不足。web storage的优势，主要体现在如下方面：
1存储容量：提供更大的存储容量，每个网域为5MB
2零带宽：web storage存储的数据仅仅是在本地，不会与服务器发生任何交互，所以不占任何带宽。
3编程接口：web storage提供了一套丰富的编程接口，使得数据操作更加方便。
4独立的存储控间：每个域都有独立的存储控间，各个存储控间是完全独立的，因此，不会造成数据的混乱。

由此可见，web storage并不能替代cookie，cookie能做的事情，web storage并不一定能做，服务器可以访问cookie数据，但是不能访问web storage数据，所以他们是互相补充的，会在各自不同的方面发挥作用。

localStorage和sessionStorage
1 localStorage和sessionStorage的区别
web storage存储包括sessionStorage和localStorage。熟悉web编程的人，第一次接触web storage时会很自然的与session 和cookie对应，不同的是，cookie和session是服务器端可以操作的数据，但是sessionStorage和localStorage是客户端可以操作的数据。
他们完全继承同一个编程接口，他们的主要区别在于数据存在的事件范围和页面范围，如下所示：
sessionStorage localStorage
数据会保存到存储它的窗口或标签关闭时数据的生命周期比窗口或者浏览器的生命周期长
数据在构建他们的窗口或标签内可见数据可被同源的每个窗口或者标签共享

2 检测浏览器支持
在HTML5的各项特性中，web storage的浏览器支持度是比较好的，目前，所有的主流浏览器都在一定程度上支持web storage。因此，web storage在一定程度上成为web应用中最安全的api之一，尽管如此，还是需要检查，浏览器是否支持web storage，因为在某些情况下，可能会导致不能使用web storage功能。
检测浏览器是否支持web storage

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
   </body>
   <script type="text/javascript">
       function checkStorageSupport(){
           if(window.sessionStorage){
               console.log("浏览器支持sessionStorage");
           }else{
               console.log("浏览器不支持sessionStorage特性");
           }
           if(window.localStorage){
               console.log("浏览器支持localStorage");
           }else{
               console.log("浏览器不支持localStorage");
           }
       }
   window.addEventListener("load",checkStorageSupport(),false);
   </script>
</html>

运行结果如下图所示:

设置和获取storage数据
sessionStorage和localStorage作为window的特性，完全继承storage API,他们提供的操作数据的方法完全相同，下面以sessionStorage为例。
1保存数据到sessionStorage
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
   </body>
   <script type="text/javascript">
       var sessionStorage = window.sessionStorage;
       sessionStorage.setItem("a","aaa");
   </script>
</html>
其中"a"为键，"aaa"为值

从sessionStorage中获取值
如果知道保存到sessionStorage中的键，就可以从其中获得对应的值，sessionStorage的完整语法如下：
<script type="text/javascript">
       var sessionStorage = window.sessionStorage;
var value = sessionStorage.getItem("a");
</script>

3设置和获取数据的其他方法
对访问storage数据还有更简单的方法，根据键值的配对关系，直接在session对象上设置和获取数据，可以不用调用setItem和getItem方法，保存数据的方法也可以写成如下形式：
window.sessionStorage.a = "aaa";
或者
window.sessionStorage["a"] = "aaa";
获取数据的方法更加直接，可写成：
value = window.sessionStorage.a;
或者
value = window.sessionStorage["a"];
这种灵活的使用方法，给编程带来了极大的灵活性，当然，对于localStorage来说，也同样具有以上设置数据和获取数据的方法。

storage API的属性和方法
在上一节中，学习了setItem()方法存储数据，但是这些方法都是来源于他们所继承的storage API所提供的方法。
1Storage接口说明
interface Storage{
readOnly attribute unsigned long length;
DOMString key (unsigned long index);
getter DOMString getItem(DOMString key);
setter creator void setItem(DOMString key,DOMString value);
deleter void removeItem(DOMString key);
void clear();
}
详细介绍：
1length;表示当前storage对象中存储的键值对的数量，storage对象是同源的。length只能反映同源的键值对数量
2key(index)方法：获取指定位置的键，一般用于便利某个Storage对象中所有的键，然后再通过键来获取相应的值，参数index为从0开始的索引，最后一个索引是length-1
3getItem(key);根据键返回对应的值，如果键不存在，则返回Null
4setItem(key ,value);将数据存储到键对应的位置，如果已经存在，则更新。
5removeItem(key);从存储对象中，移出指定的键值对，如果该键值对存在，则移出，如果不存在，则不做任何操作。
6clear;清除storage对象中所有的数据，如果storage是空的，则不做任何操作。

存储JSON对象的数据
虽然使用web storage可以存储任意的键值对数据，但是，浏览器把数据限制为字符串类型，而且对于一些复杂的结构数据，似乎管理起来比较混乱，例如，如果要保存一个学生的数据，就比较麻烦。不过对于复杂的结构数据，可以使用现代浏览器都支持的JSON对象来处理，这也为我们提供了一种可行的解决方案。
1序列化json格式的数据
由于storage是以字符串保存数据的，所以再保存json格式的数据之前，需要把json格式的数据转化为字符串，称之为序列化，可以使用JSON.stringify()方法来对数据进行序列化，使用方法如下：
var stringData = JSON.stringify(jsonObject);
2把数据反序列化
如果把存储的序列化后的数据进行访问，需要将字符串数据转化为json对象，成为反序列化，可以用JSON.parse(string);
使用方法如下：
var jsonObject = JSON.parse(stringData);

storage API的事件
有时候，会存在多个网页或标签同时访问存储的数据情况，为保证修改的数据能够及时反馈到另一个页面，HTML5的web storage内建立一套事件通知机制，会再数据更新时出发，无论监听的窗口是否存储过该数据，只要于执行存储的窗口时同源的，都会触发web storage事件
像下面这样，添加监听事件后，即可接收同源窗口的storage事件。
window.addEventListener("storage",EventHadle,true);
Storage事件接口如下所示：
interface StoreEvent:Event{
readonly attribute DOMString key;
readonly attribute DOMString? oldValue;
readonly attribute DOMString? newValue;
readonly attribute DOMString url;
readonly attribute Storage? storageArea;
}
key属性：包含了存储中被更新或者删除的键
oldValue:包含了更新前键对应的数据，如果是新添加的数据，则对应的值为null
newValue:包含了更新后的数据，如果是被删除的数据，则对应的值为null
url：指向storage事件发生的源
storageArea:该属性是一个引用，指向值发生改变的localStorage和sessionStorage。这样处理程序就可以方便的查询到Storage中的当前值，或者基于其他的storage执行其他操作。

本地数据库 web sql database
为了进一步加强客户端的存储能力，HTML5引入了本地数据库的概念，但是HTML5的数据库API仍在完善中，其中web sql database就是其中之一。

web sql database规范使用的是sql lite数据库，它允许应用程序通过一个异步的javascript接口访问数据库，虽然web sql 不属于html5的规范，但是对于移动领域是非常有用的，因为在任何情况下，sql api在数据库中的数据处理能里都是无法比拟的。
sql lite是一款轻型的数据库，遵循acid的关系型数据库，它的优势是嵌入式的，且占用资源非常低，只需要几百k的内存就可以了，在处理速度方面也非常可观。它定义了3个核心的方法：
1openDatabase()方法，使用现有的数据库或者创建新的数据库
2transaction()方法，允许我们控制事务的提交或回滚
3executeSql()方法，用于执行真实的sql查询

操作web sql数据库
打开数据库
var db = openDatabase("db","1.0","测试数据库","2*1024*1024",creationCallback);
说明，该方法有5个参数，第一个表示数据库名，第二个表示版本号，第三个表示数据库的描述，第四个表示数据库的大小，第五个表示创建回调函数，其中第五个是可选的，
创建数据表
db.transaction(function(tx){
tx.executeSql("create table if not exist username (id ,nuique.,name)");
})

Tags：HTML 前端本地存储

很赞哦！ ()

上一篇：拖放功能（第八章）(图文)

下一篇：利用canvas绘制图形(第十章)(图文)