HTML 5入门知识（五）

　　本地存储Web Storage

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

　　cookie存储数据的不足

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

1、大小的限制：cookie的大小被限制在4kb。在web的富应用环境中，不能接受文件或者邮件那样的大数据；

2、带宽的限制：只要有涉及cookie的请求，cookie数据都会在服务器和浏览器间来回传送。这样无论访问哪个页面，cookie数据都会消耗网络的带宽；

3、安全风险：由于cookie会频繁地在网络中传送，而且数据在网络上是可见的，因此在不加密的情况下，是有安全风险的；

4、操作复杂：在客户端的浏览器中，使用JavaScript操作cookie数据是比较复杂的。但是服务器可以很方便地操作cookie数据。

　　使用Web Storage存储的优势

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

1、存储容量：提供更大的存储量。在Firefox、Chrome、Safari和Opera中，每个网域为5MB；在IE8及以上则每个网域为10MB；

2、零带宽：Web Storage中的数据仅仅是存储在本地，不会与服务器发生任何交互行为，所以不存在网络带宽的占用问题；

3、编程接口：Web Storage听歌了一套丰富的编程接口，使得数据操作更加方便；

4、独立的存储空间：每个域，包括子域都有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据的混乱。

注意：服务器可以访问cookie中的数据，但是不能访问Web Storage中的数据。

　　会话存储（sessionStorage）与本地存储（localStorage）的区别

cookie和session完全是服务器端可以操作的数据，但是sessionStorage和localStorage则完全是浏览器客户端操作的数据。它们完全继承同一个Storage API，所以sessionStorage和localStorage的编程接口是一样的。sessionStorage和localStorage的主要区别在于数据存在的时间范围和页面范围不同。

时间范围：前者数据会保存到存储它的窗口或标签关闭时；后者的数据生命周期比窗口或浏览器的生命周期长。

页面范围：前者数据只在构建他们的窗口或标签页内可见；后者的数据可被同源的每个窗口或标签页共享。

　　使用Web Storage

检查浏览器是否支持 Web Storage，如：

设置和获取Storage数据：

sessiongStorage和localStorage作为window的属性，完全继承Storage API，它们提供的操作数据的方法完全相同。

1、保存数据到sessionStorage，如：

2、从sessionStorage中获取数据，如：

3、设置和获取数据的其他写法，对于访问Storage对象还有更简单的方法，根据“键”和“值”的配对关系，直接在sessionStorage对象上设置和获取数据，可完全避免调用setItem（）和getItem（）方法，如：

这种灵活的使用方法，给编程带来极大的灵活性。当然，对于localStorage来说，同样具有上述设置数据和获取数据的方法。

使用sessionStorage和localStorage实战：

使用Storage对象保存页面内容：

链接：https://cruxf.github.io/WebStorage/sessionStorage.html

　　存储JSON对象的数据

虽然使用Web Storage可以保持任意的“键/值”对数据，但是一些浏览器把数据限定为字符串类型，而且对于一些复杂结构的数据，管理起来比较混乱。不过对于复杂结构的数据，可以使用现代浏览器都支持的JSON对象来处理。

1、序列化JSON格式的数据

由于Storage是以字符串保存数据的，因此在保存JSON格式的数据之前，需要把JSON格式的数据转换为字符串，称为序列化。可以使用JSON.stringify（）序列化JSON格式的数据未字符数据，如：

2、把数据反序列化为JSON格式

如果把存储的Storage中的数据以JSON格式对象去访问，需要把字符串数据转换成JSON格式的数据，称为反序列化。可以使用JSON.parse（）反序列化字符串数据未JSON格式的数据，如：

案例：

链接：https://cruxf.github.io/WebStorage/jsonstorage.html

　　Storage API的事件

有时候，会存在多个网页或标签页同时访问存储数据的情况。为保证修改的数据能够及时反馈到另一个页面，HTML 5的Web Strage内建立一套事件通知机制，会在数据更新时触发。无论监听的窗口是否存储过该数据，只要与执行存储的窗口是同源的，都会触发Web Storage事件。

　　课外作业：了解本地数据库Web SQL