您现在的位置是:首页 > 前端学习 > 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   前端   本地存储

很赞哦! ()

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计130篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们