##前言

随着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区别表，大家看一下：

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

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

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！

前端视频资料：
。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！

[外链图片转存中…(img-mM4EEa4C-1627101758486)]

前端视频资料：