HTML5-11本地存储.pptx

本地存储
第十一章
本章内容
Web Storage
本地数据库
一、Web Storage
HTML4中使用cookies在客户端保存诸如用户名等简单的信息,但是,使用cookies存储永久数据存在以下问题:
大小:cookies的大小限制在4KB
带宽:cookies是随HTTP事务一起被发送的,因此会浪费一部分带宽
复杂性:正确的操纵cookies是很困难的
HTML5重新提供了一种在客户端本地保存数据的功能,Web Storage
1、Web Storage
Web Storage功能,就是在Web上存储数据,分为两种:
sessionStorage:将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,session对象可用来保存在这段时间内所要求保存的任何数据
localStorage:将数据保存在客户端本地的硬件设备中,即使浏览器关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可用
区别:sessionStorage为临时保存,localStorage为永久保存
示例:代码8-1
注意观察:
1、IE可能存在的不兼容问题
2、使用360浏览器运行,输入数据,关闭浏览器,重新打开,由于localStorage的存在,所以能够立即读取信息
3、打开Chrome等浏览器继续查看
注意:
无论是sessionStorage还是localStorage都会使用getItem方法来读取数据,使用setItem方法来保存数据
保存数据时按“键名/键值”的形式进行保存,使用getItem读取数据时,将参数指定为键名,返回键值
保存时,不允许重复保存相同的键名,保存后可以修改键值,但不允许修改键名
2、简单Web留言本
如果要保存的数据量比较大的话,使用上述方法会比较麻烦
简单Web留言本示例,要求:
使用一个多行文本框来输入数据
点击按钮时将文本框中的数据保存到localStorage中
在表单下部放置一个p元素来显示保存后的数据
保存内容时,同时保存当前日期和时间,并将该日期和时间一并显示在p元素中
示例:8-3
3、作为简易数据库使用
如果想要将WebStorage作为数据库来使用的话,需要考虑几个问题:
数据库中的表都分为几列,怎样实现对列的管理
怎样实现数据的检索功能
实现对列的管理,可以使用JSON格式(JavaScript object Notation,是将JavaScript中的对象作为文本形式来保存时使用的一种格式),获取对象时再通过JSON格式获取
示例:客户信息管理网页
客户的信息分为:姓名、E-Mail地址、电话号码、备注,需要把它们保存在localStorage中,如果输入用户姓名,可以进行检索并获取该客户的所有信息