HTML 5入门知识(五)

时间:2024-10-17 15:34:50

  本地存储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,如:

HTML 5入门知识(五)

设置和获取Storage数据:

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

1、保存数据到sessionStorage,如:

HTML 5入门知识(五)

2、从sessionStorage中获取数据,如:

HTML 5入门知识(五)

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

HTML 5入门知识(五)

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

使用sessionStorage和localStorage实战:

HTML 5入门知识(五)

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

HTML 5入门知识(五)

HTML 5入门知识(五)

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

  存储JSON对象的数据

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

1、序列化JSON格式的数据

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

HTML 5入门知识(五)

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

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

HTML 5入门知识(五)

案例:

HTML 5入门知识(五)

HTML 5入门知识(五)

HTML 5入门知识(五)

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

  Storage API的事件

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

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