HTML5网页前端设计第3版 第09章教案-HTML5Web存储API

《HTML5网页前端设计》教案第09章HTML5Web存储API一、教学目标：了解Web存储的概念；了解本地存储与会话存储方式的区别；熟悉Storage接口；掌握存储、读取、遍历和删除数据的方法。二、教学重点和难点：重点：存储、读取、遍历和删除数据的方法；难点：本地存储与会话存储方式在使用时的选择。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要介绍HTML5Web存储API的功能与应用。HTML5存储API包含了本地存储（localStorage）与会话存储（sessionStorage）两种方式，其中localStorage可以实现客户端数据的永久存储，而sessionStorage只能在浏览器打开的时间段（又称为一个session）中存储数据，若浏览器关闭则数据全部消失。五、教学基本内容：9.1Web存储技术概述 9.1.1HTTPCookie存储HTTPcookie由服务器端生成，将数据以“键-值”对(key-valuepairs)的形式发送给客户端浏览器，浏览器将这些数据保存至指定目录下的文本文件中，这样在下一次访问相同的网站时可以直接使用该cookie数据。HTTPcookie最早设计出来是用于处理单个事务，存在以下问题，因此不太适用于存储大量数据：cookie的存储数据量小：一个cookie最多只能存放4096B左右的数据，并且部分浏览器对cookie有数量限制，比如Firefox、Opera等每个域名只能保存50个cookie。cookie请求限制：每次浏览器与服务器进行请求时，cookie都会存放在请求头部传输到服务器端。如果请求头部的大小过大，就会导致服务器无法处理。 9.1.2HTML5Web存储 HTML5Web存储API和cookie存储方式类似，也是将数据以“键-值”对(key-valuepairs)的形式持久存储在Web客户端。相比HTTPcookie而言，HTML5的Web存储技术更适用于存储大量数据，主流浏览器如Chrome、Firefox和Opera每个域名下可以存放5M的数据量，并且发生请求时不会带上Web存储的内容。HTML5提供了两种客户端存储数据的方法：本地存储（localStorage）与会话存储（sessionStorage）。localStorage方法存储的数据没有时间限制，永久保存，并且数据可以被不同的网页页面共享使用。sessionStorage主要是针对一个session会话的数据存储，只能在创建session的网页中使用，当用户关闭浏览器窗口时，该数据将被删除。9.2主流浏览器支持情况 HTML5Web存储技术是HTML5中比较常用的一个特性，目前几乎所有的主流浏览器都支持该技术。具体支持情况如表9-1所示。表9-SEQ表9-\*ARABIC1主流浏览器对HTML5Web存储支持情况一览浏览器EdgeFirefoxChromeSafariOpera支持情况8.0及以上3.0及以上3.0及以上4.0及以上10.5及以上由此可见，目前所有的主流浏览器都支持HTML5Web存储技术。9.3HTML5Web存储API的应用 9.3.1检查浏览器支持情况检查浏览器是否支持localStorage的相关JavaScript代码如下：if(window.localStorage){//浏览器支持Web存储中的localStorage}else{//浏览器不支持Web存储中的localStorage}检查浏览器是否支持sessionStorage的相关JavaScript代码和localStorage类似：if(window.sessionStorage){//浏览器支持Web存储中的sessionStorage}else{//浏览器不支持Web存储中的sessionStorage} 9.3.2Storage接口在HTML5Web存储API中，使用Storage接口实现本地存储（localStorage）或会话存储（sessionStorage）数据的添加、修改、查询或删除。如果希望使用localStorage，需要在JavaScript中声明window.localStorage方法，也可以省略window.前缀，直接写为localStorage；如果需要使用的是sessionStorage，同样可以在JavaScript中声明window.sessionStorage方法，或省略window.前缀，直接写为sessionStorage。Storage接口中包含了只读属性length，该属性返回值为整数形式，表示当前存储对象中“键-值”对的总数量。Storage接口还包含一系列方法，用于获取、添加、修改或删除存储数据。其中常用方法如表9-2所示。表9-SEQ表9-\*ARABIC2Storage接口的常用方法一览方法名称解释key(n)用于返回数据中第n个值的名称。如果n大于所有键值对的总数，则返回null值。getItem(key)用于返回指定键名称的值，如果该名称不存在，则返回null值。setItem(key,value)用于设置一条自定义的“键-值”对数据，如果该数据原先不存在，则会在存储对象的键值对列表中新增该数据；如果该数据的键名称原先存在，则看数据值是否有变化，如有变化则更新成最新值，否则不做任何操作。removeItem(key)用于删除存储对象中指定key名称的数据，如果没有则不做任何操作。clear()用于清空存储对象中的键值对列表，如果原先就无任何数据则不做任何操作。 9.3.3localStoragevssessionStorage localStorage方法用于在客户端永久存储数据，该方法存储的数据没有过期时间，即使关闭了浏览器重新打开，数据也仍然保存在设备中可继续使用。sessionStorage方法和localStorage方法的语法结构均类似，只不过sessionStorage方法有时间限制，只能用于在浏览器打开的时间段（又称为一个session）中存储数据，若浏览器关闭则数据全部消失9.3.4存储数据 在Storage接口中提供的setItem()方法可以用于存储数据。其语法结构如下：localStorage.setItem('key','value');或sessionStorage.setItem('key','value');数据是以“键-值”对的方式进行存储的，每个数据值对应一个指定的键名称进行索引。其中key换成需要存储的键名称（可自定义），value换成需要存储的数据值。这里的引号可以是单引号或双引号的任意一种。setItem()方法还可以被简写成另外两种形式，由于localStorage和sessionStorage所使用的方法均来自于Storage接口，因此语法完全相同，可以根据存储性质选择其中一种使用。以localStorage为例，简写代码如下：localStorage['key']='value';或localStorage.key='value';例如，使用localStorage长期存储用户登录时输入的用户名信息：localStorage.setItem('username','admin');上述代码表示将值为admin的用户名存在本地数据中，其中username是键名称、admin是数据值。也可以直接使用键名称代替setItem()方法实现数据存储。例如，上述代码可修改为：localStorage.username='admin';这种简写的方法中键名称无需添加引号，而数据值与原先的写法完全相同。如果存储的数据值中带有引号，则setItem()方法中键和值外边的引号使用另一种形式，以避免重复冲突。例如：localStorage.setItem('name','Hisnameis"Wallace".');或localStorage.setItem("name","Hisnameis'Wallace'.");以上两种写法均可正确进行数据的存储。在Google浏览器的调试模式中可以查看Web存储的情况。正常打开Google浏览器并运行与Web存储有关的HTML5页面，然后按F12进入调试模式，点击“Resource”选项卡，即可查看当前页面的localStorage、sessionStorage和cookies等数据情况。Google浏览器的调试模式如图9-2所示。图9-SEQ图9-\*ARABIC2Google浏览器调式模式下的数据存储视图由图可见，在“Resource”选项卡中左侧菜单栏包含了本地存储、会话存储、Cookies存储等一系列数据存储的情况。用户根据点击不同的选项栏目，可以查看指定的数据存储信息。9.3.5读取指定数据 在Storage接口中提供的getItem()方法可以用于获取指定了键名称的数据值。其语法结构如下：localStorage.getItem('name')或sessionStorage.getItem('name')这里的name需要替换成指定的键名称。例如：varstudentID=localStorage.getItem('studentID');上述代码表示从localStorage存储的数据中读取键名称为studentID的数据值。如果该名称并不存在，则直接返回null值。getItem()方法也可以省略，直接使用键名称代替。简写如下：localS或sessionS读取时，只要指定数据的键名称即可找到对应的值。例如，之前获取studentID的代码可以改写为：varstudentID=localStorage.studentID;简写后的内容与之前的完整代码作用完全相同。但是需要注意的是，使用键名称代替getItem()方法的简写方式是在已知具体的键名称时方可使用。如果是变量则不可使用简写方式。例如：varx='studentID';varstudentID=localStorage.x;上述方法等同于查找键名称为x的数据值，与实际想要查找的键名称studentID无关。9.3.6数据遍历 如果需要读取所有的数据，可以先使用Storage接口中length属性获取数据的数目，如果返回值大于0就可以再使用key(n)方法依次获取每一条数据的键名称，然后根据键名称进一步获取到数据值。例如：//获取使用localStorage存储的数据总数varnum=localStorage.length;//进行存储数据的遍历for(vari=0;i<num;i++){//获取键名称varname=localStorage.key(i);//获取键值varvalue=localStorage.getItem(name);

}9.3.7删除指定数据 在Storage接口中提供的removeItem()方法可以用于删除指定了键名称的数据。其语法结构如下：localStorage.removeItem('name')或sessionStorage.removeItem('name')执行removeItem()方法后数据可以被彻底删除，包括数据的键名称和对应的值。例如：localStorage.removeItem('test');上述代码表示在localStorage存储中删除键名称为test的数据值。如果提供的键名称无法匹配到已存储的数据信息，则本次不进行删除操作。9.3.8清空所有数据 在Storage接口中提供的clear()方法可以用于清空所有Web存储数据。其语法结构如下：localStorage.clear();或sessionStorage.clear();该方法不带任何参数，直接调用clear()可以清空整个localStorage或sessionStorage对象中的所有数据。9.4实验案例——网页主题设置的设计与实现功能要求：使用Web存储中的localStorage技术，可以把用户对用网页主题样式的设置内容永久存储下来。本示例将实现一个网页设置页面，用户可以自定义页面的主题颜色与字体风格并将其存储在localStorage中。重新加载该页面时，会显示上一次保存的样式要求。9.5本章小结HTML5新增Web存储API可以用于在客户端保存数据。根据存储时间不同，HTML5Web存储API包含两种存储方式：localStorage和sessionStorage。其中localStorage适用于永久存储数据，而sessionStorage只能维持在浏览器关闭前的数据状态。HTML5拖放API中包含了Storage接口，该接口提供了对于Web存储数据的添加、删除、读取、遍历等一系列功能。 六、课后习题什么是HTML5Web存储，它与传统的cookie存储方式相比有哪些不同？答：HTML5Web存储API和cookie存储方式类似，也是将数据以“键-值”对(key-valuepairs)的形式持久存储在Web客户端。相比HTTPcookie而言，HTML5的Web存储技术更适用于存储大量数据，其中IE每个域名下可以存放10M数据，而其他主流浏览器如Chrome、Firefox和Opera每个域名下也可以存放5M的数据量，并且发生请求时不会带上Web存储的内容。HTML5Web存储API中有哪两种存储方式，它们有什么不同？答：HTML5提供了两种客户端存储数据的方法：本地存储（localStorage）与