localstroage使用详解(本地存储的方式和区别)

前端这点事 30 0

前言

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

本章知识点

  • 了解Web Storage的优势
  • 理解localStorage与sessionStorage的区别
  • 掌握设置和获取Storage数据的方法
  • 掌握Storage API的属性和方法
  • 了解本地数据库Web SQL

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

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的主要区别在于数据存在的时间范围和页面范围。
我画了一个sessionStorage和localStorage区别表,大家看一下:

localstroage使用详解(本地存储的方式和区别)-第1张图片-前端这点事

 

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

控制台预览结果:
我就直接在控制台输入看结果了,读者可以把上面代码放入页面内,运行看下结果:

localstroage使用详解(本地存储的方式和区别)-第2张图片-前端这点事

 

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来说,同样具有上述设置数据和获取数据的方法。
代码示范:

localstroage使用详解(本地存储的方式和区别)-第3张图片-前端这点事

 

localstroage使用详解(本地存储的方式和区别)-第4张图片-前端这点事

 

6. Storage API的属性和方法

localstroage使用详解(本地存储的方式和区别)-第5张图片-前端这点事

 

在使用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()函数要快很多。
代码示范:

localstroage使用详解(本地存储的方式和区别)-第6张图片-前端这点事

 

localstroage使用详解(本地存储的方式和区别)-第7张图片-前端这点事

 

localstroage使用详解(本地存储的方式和区别)-第8张图片-前端这点事

 



localstroage使用详解(本地存储的方式和区别)-第9张图片-前端这点事

 

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事件的相关属性:

localstroage使用详解(本地存储的方式和区别)-第10张图片-前端这点事

 

9. 本地数据库Web SQL

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

localstroage使用详解(本地存储的方式和区别)-第11张图片-前端这点事

 

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表中查询信息。查询出来的结果会传递给匿名的回调函数,可以在回调函数中处理查询的结果,如控制台输出结果。

以上文章希望对大家有帮助。

标签: JavaScript

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~