zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    webService基本概念、元素及简单编码实现
    云服务器、vps、虚拟主机的区别
    SOAP和WSDL的一些必要知识
    密码学基础
    oracle执行计划
    dubbo学习笔记:快速搭建
    dubbo和zookeeper的关系
    查看wifi密码
    自动保存图表
    自定义颜色
  • 原文地址:https://www.cnblogs.com/fengxiongZz/p/6517388.html
Copyright © 2011-2022 走看看