• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • html5 本地存储

    版本:HTML5

    随着Web应用的发展,需要在用户本地浏览器上存储更多的应用数据,传统的cookie存储的方案已经不能满足发展的需求,而使用服务器端存储的方案则是一种无奈的选择。HTML的Web Storage API是一个理想的解决方案。如果是存储复杂的数据,则可以借助Web SQL Database API来实现,可以使用SQL语句完成复杂数据的存储与查询。本文向大家介绍一下HTML5中的本地存储功能。

    使用HTML5的Web Storage功能,可以在客户端存储更多的数据,而且可以实现数据在多个页面中共享甚至是同步。

    localStorage 用以存储周期较长、多页面,以及多浏览器 session 的内数据。甚至持续到你重起浏览器或者电脑。 本地 存储特性被如下浏览器所支持:IE8+, Firefox 3.5+, Safari 4.0+, Chrome 2.0+ and Opera 10.5+。

    浏览器支持

    Internet Explorer 8 以上版本都支持

    1、cookie存储数据的不足

    cookie可用于在程序员间传递少量的数据,对于Web应用来说,它是一个在服务器和客户端之间来回传送文本值的内置机制,服务器可以根据cookie来追踪用户在不同页面的访问信息。正因为它卓越的表现,在目前的Web应用中,cookie得到了最为广泛的应用。

    尽管如此,cookie仍然有很多不尽如人意的地方,主要表现在以下方面。

    1. 大小限制:cookie的大小被限制在4KB。在Web的富应用环境中,不能接受文件或邮件那样的大数据。
    2. 带宽限制:只要有涉及cookie的请求,cookie数据都会在服务器和浏览器间来回传送。这样无论访问哪个页面,cookie数据都会消耗网络的带宽。
    3. 安全风险:由于cookie会频繁地在网络中传送,而且数据在网络中是可见的,因此在不加密的情况下,是有安全风险的。
    4. 操作复杂:在客户端的浏览器中,使用JavaScript操作cookie数据是比较复杂的。但是服务器可以很方便地操作cookie数据。

    2.使用Web Storage存储的优势

    Web Storage可以在客户端保存大量的数据,而且通过其提供的接口,访问数据也非常的方便。然而,Web Storage的诞生并不是为了替代cookie,相反,是为了弥补cookie在本地存储中表现的不足。
    Web Storage本地存储的优势主要表现在以下几个方面。

    1. 存储容量:提供更大的存储容量。在Firefox、Chrome、Safari和Opera中,每个网域为5MB;在IE8及以上为10MB。
    2. 零带宽:Web Storage 因为是本地存储,不与服务器发生交互行为,所以不存在带宽的占用。
    3. 编程接口:Web Storage提供了一套丰富的编程接口,使得数据操作更加方便。
    4. 独立的存储空间:每个域都有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据的混乱。

    由此可见,Web Storage并不能完全替代cookie,cookie能做的事情,Web Storage不一定能做到,如服务器可以访问cookie数据,但是不能访问Web Storage数据。所以Web Storage和cookie是相互补充的,会在各自不同领域发挥作用。随着移动互联网的发展,浏览器端的富应用必然是一种趋势。

    3. 会话存储(sessionStorage)和本地存储(localStorage)的区别

    Web Storage包括会话存储(sessionStorage)和本地存储(localStorage)。熟悉Web变成的人员第一次接触Web Storage时,会自然的与session和cookie去对应。不同的是,cookie和session完全是服务器端可以操作的数据,但是sessionStorage和localStorage则完全是浏览器客户端操作的数据。

    sessionStorage和localStorage完全继承同一个Storage API,所以sessionStorage和localStorage的编程接口是一样的。sessionStorage和localStorage的主要区别在于数据存在的时间范围和页面范围。

    sessionStoragelocalStorage
    数据保存到储存它的窗口或者关闭标签时数据的生命周期比窗口或者浏览器的周期长
    数据只在构建它们的窗口或者标签内可见数据可以被同源的窗口或者标签页共享

    4. 检查浏览器是否支持Web Storage

    放到页面中的代码:

    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);
     

    控制台预览结果:

    5. 设置和获取Storage数据

    sessionStorage和localStorage作为window属性,完全继承Storage API,它们提供操作数据的方法完全相同。下面以sessionStorage属性为例进行讲解。

    1、保存数据到sessionStorage

    window.sessionStorage.setItem("key","value");

    Key为键,value为值,setItem()表示保存数据的方法。

    2、从sessionStorage中获取数据
    如果知道保存到sessionStorage中的key,就可以得到对应的值。sessionStorage获取数据的基本语法如下:

    value = window.sessionStorage.getItem("key");

    3、 设置和获取数据的其他写法

    对于访问Storage对象还有更简单的方法,根据“键”和“值”的配对关系,直接在sessionStorage对象上设置和获取数据,可完全避免调用setItem()和getItem()方法。保存数据的方法也可写为如下的形式。

    window.sessionStorage.key = "value";

    window.sessionStorage["key"]="value";

    获取数据的方法更加直接,可写为如下形式:

    value = window.sessionStorage.key;

    value = window.sessionStorage["key"];

    对于localStorage来说,同样具有上述设置数据和获取数据的方法。

    这里写图片描述
    输入结果

    6. Storage API的属性和方法

    这里写图片描述
    在使用sessionStorage和localStorage时,以上的属性和方法都可以使用,但需要注意其影响的范围。

    7. 存储JSON对象的数据

    1、序列化JSON格式的数据
    由于Storage是以字符串保存数据的,因此在保存JSON格式的数据之前,需要把JSON格式的数据转换为字符串,称为序列化。可以使用JSON.stringify()序列化JSON格式的数据为字符串数据。使用方法如下:

    var stringData = JSON.stringify(jsonObject);

    以上代码把JSON格式的数据对象jsonObject序列化为字符串数据stringData。

    2、把数据发序列化为JSON格式
    如果把存储的Storage中的数据以JSON格式对象的方式去访问,需要把字符串数据转换为JSON格式的数据,成为反序列化。可以使用JSON.parse()反序列化字符串数据为JSON格式的数据。使用方法如下:

    var jsonObject = JSON.parse(stringData);

    以上代码把字符串数据stringData反序列化为JSON格式的数据对象jsonObject。
    反序列化字符串为JSON格式的数据,也可以使用eval()函数,但eval()函数是把任意的字符串转换为脚本,有很大的安全隐患,但是JSON.parse()只反序列化JSON格式的字符串数据,如果字符串数据不符合JSON数据格式,则会产生错误,同时也减少安全隐患,但是执行效率方面eval()函数要快很多。
    代码示范:
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述

    8. Storage API的事件

    有时候,会存在多个网页或标签页同时访问存储数据的情况。为保证修改的数据能够及时反馈到另一个页面,HTML5的Web Storage内建立一套事件通知机制,会在数据更新时触发。无论监听的窗口是否存储过数据,只要与执行存储的窗口是同源的,都会触发Web Storage事件。
    例如下面的代码,添加监听事件后,即可接收同源窗口的Storage事件。

    window.addEventListener("storage",EventHandle,true);

    Storage是添加的监听事件,只要是同源的Storage事件发生,都能够因数据更新而出发事件。
    Storage事件的接口如下所示:

    interface StorageEvent : Event {    
        readonly attribute DOMString key;    
        readonly attribute DOMString ? oldValue;    
        readonly attribute DOMString ? newValue;    
        readonly attribute DOMString url;    
        readonly attribute Storage ? storageArea;
    };

    StorageEvent对象在事件触发时,会传递给事件处理程序,它包含了存储变化有关的所有必要的信息。
    Storage事件的相关属性:
    这里写图片描述

    9. 本地数据库Web SQL

    为了进一步加强客户端的存储能力,HTML5引入了本地数据库的概念。 Web SQL Database的规范使用的是SQLite数据库,它允许应用程序通过一个异步的JavaScript接口访问数据库。
    SQLite是一款轻型的数据库,遵循ACid的关系型数据库管理系统,它的优势是嵌入式,且占用资源非常低,只需要几百KB的内存就可以了。在跨平台方面,它能够支持Windows、Linux等主流操作系统,同时能够与很多程序语言如C#、PHP、Java、JavaScript等结合。它包含ODBC接口,在处理速度方面也非常可观。
    Web SQL Database规范中定义了3个核心方法:
    这里写图片描述

    10. Web SQL数据库基本操作

    1、打开数据库

    var db=openDatabase("TestDB","1.0","测试数据库",2*1024*1024,creation Callback);

    该方式有5个必需的参数,第1个参数表示数据库名,第2个参数表示版本号,第3个参数表示数据库的描述,第4个参数表示数据库大小,第5个参数表示创建回调函数,其中第5个参数是可选的。
    2、创建数据库

    db.transaction(function(tx){
       tx.executeSql('CREATE TABLE IF NOT EXISTS UserName(id unique,Name)');
    });

    使用transaction()方法传递给回调函数的tx是一个transaction对象,然后使用transaction对象的executeSql()方法,可以执行SQL语句,这里的SQL语句就是创建数据表的命令。
    3、添加数据至数据库表

    db.transaction(function(tx){    
         tx.executeSql('INSERT INTO UserName(id,name) VALUES(1,"张三")');
         tx.executeSql('INSERT INTO UserName(id,name) VALUES(2,"李四")');
    });

    两个包含Insert INTO命令的SQL语句,表示插入数据,将会在本地数据库TestDB中的UserName表中添加两条数据。
    4、读取数据库中的数据

    db.transaction(function(tx){    
       tx.executeSql('SELECT * FROM UserName',[],function(tx,results){        
       var len = results.rows.length;        
       for(var i=0;i<len;i++){
           console.log(results.rows.item(i).Name);        
       },null);  
    });

    executeSql()方法中执行了包含select命令的SQL语句,表示查询,将从本地数据库TestDB中的UserName表中查询信息。查询出来的结果会传递给匿名的回调函数,可以在回调函数中处理查询的结果,如控制台输出结果。