HTML5网页前端设计（第3版）- 微课视频版 课件 CH09 HTML5 Web存储API

第09章HTML5Web存储API主讲人：XX老师本章学习目标了解Web存储的概念；了解本地存储与会话存储方式的区别；熟悉Storage接口；掌握存储、读取、遍历和删除数据的方法。目录9.1Web存储技术概述 9.2主流浏览器支持情况 9.3HTML5Web存储API的应用 9.1.1HTTPCookie存储9.1.2HTTP5Web存储9.1Web存储技术概述9.1.1HTTPCookie存储HTTPcookie由服务器端生成，将数据以“键-值”对(key-valuepairs)的形式发送给客户端浏览器，浏览器将这些数据保存至指定目录下的文本文件中，这样在下一次访问相同的网站时可以直接使用该cookie数据。HTTPcookie技术保存的数据名称和值都可以自定义，常见用于判断用户是否已登陆网站，或者保存购物车中等待付款的商品信息等。9.1.1HTTPCookie存储HTTPcookie最早设计出来是用于处理单个事务，存在以下问题，因此不太适用于存储大量数据：cookie的存储数据量小：一个cookie最多只能存放4096B左右的数据，并且部分浏览器对cookie有数量限制，比如Firefox、Opera等每个域名只能保存50个cookie。cookie请求限制：每次浏览器与服务器进行请求时，cookie都会存放在请求头部传输到服务器端。如果请求头部的大小过大，就会导致服务器无法处理。9.1.2HTTP5Web存储HTML5Web存储API和cookie存储方式类似，也是将数据以“键-值”对(key-valuepairs)的形式持久存储在Web客户端。相比HTTPcookie而言，HTML5的Web存储技术更适用于存储大量数据，主流浏览器如Chrome、Firefox和Opera每个域名下可以存放5M的数据量，并且发生请求时不会带上Web存储的内容。9.1.2HTTP5Web存储HTML5提供了两种客户端存储数据的方法：本地存储（localStorage）与会话存储（sessionStorage）。localStorage方法存储的数据没有时间限制，永久保存，并且数据可以被不同的网页页面共享使用。sessionStorage主要是针对一个session会话的数据存储，只能在创建session的网页中使用，当用户关闭浏览器窗口时，该数据将被删除。9.2

主流浏览器支持情况浏览器EdgeFirefoxChromeSafariOpera支持情况8.0及以上3.0及以上3.0及以上4.0及以上10.5及以上9.3HTML5Web存储API的应用9.3.1检查浏览器支持情况9.3.2Storage接口9.3.3localStoragevssessionStorage9.3.4存储数据9.3HTML5Web存储API的应用9.3.5读取指定数据9.3.6数据遍历9.3.7删除指定数据9.3.8清空所有数据9.3.1检查浏览器支持情况在使用Web存储API之前，需要首先确认浏览器的支持情况。由于存储的数据库可以直接被HTMLDOM中的window对象访问，故最简单的检测方法是使用JavaScript代码分别检查window.localStorage或windows.sessionStorage是否存在。如果不存在，则说明浏览器不支持Web存储API。9.3.1检查浏览器支持情况检查浏览器是否支持localStorage的相关JavaScript代码如下：if(window.localStorage){//浏览器支持Web存储中的localStorage}else{//浏览器不支持Web存储中的localStorage}9.3.1检查浏览器支持情况检查浏览器是否支持sessionStorage的相关JavaScript代码和localStorage类似：if(window.sessionStorage){//浏览器支持Web存储中的sessionStorage}else{//浏览器不支持Web存储中的sessionStorage}9.3.1检查浏览器支持情况【例9-1】检测浏览器对HTML5Web存储的支持情况

9.3.2Storage接口在HTML5Web存储API中，使用Storage接口实现本地存储（localStorage）或会话存储（sessionStorage）数据的添加、修改、查询或删除。9.3.2Storage接口如果希望使用localStorage，需要在JavaScript中声明window.localStorage方法，也可以省略window.前缀，直接写为localStorage；如果需要使用的是sessionStorage，同样可以在JavaScript中声明window.sessionStorage方法，或省略window.前缀，直接写为sessionStorage。9.3.2Storage接口Storage接口中包含了只读属性length，该属性返回值为整数形式，表示当前存储对象中“键-值”对的总数量。9.3.2Storage接口方法名称解释key(n)用于返回数据中第n个值的名称。如果n大于所有键值对的总数，则返回null值。getItem(key)用于返回指定键名称的值，如果该名称不存在，则返回null值。setItem(key,value)用于设置一条自定义的“键-值”对数据，如果该数据原先不存在，则会在存储对象的键值对列表中新增该数据；如果该数据的键名称原先存在，则看数据值是否有变化，如有变化则更新成最新值，否则不做任何操作。removeItem(key)用于删除存储对象中指定key名称的数据，如果没有则不做任何操作。clear()用于清空存储对象中的键值对列表，如果原先就无任何数据则不做任何操作。Storage接口的常用方法一览9.3.3localStoragevssessionStorage9.3.3localStoragevssessionStoragelocalStorage方法用于在客户端永久存储数据，该方法存储的数据没有过期时间，即使关闭了浏览器重新打开，数据也仍然保存在设备中可继续使用。sessionStorage方法和localStorage方法的语法结构均类似，只不过sessionStorage方法有时间限制，只能用于在浏览器打开的时间段（又称为一个session）中存储数据，若浏览器关闭则数据全部消失。9.3.4存储数据数据是以“键-值”对的方式进行存储的，每个数据值对应一个指定的键名称进行索引。9.3.4存储数据在Storage接口中提供的setItem()方法可以用于存储数据。其语法结构如下：localStorage.setItem('key','value');或sessionStorage.setItem('key','value');其中key换成需要存储的键名称（可自定义），value换成需要存储的数据值。这里的引号可以是单引号或双引号的任意一种。9.3.4存储数据setItem()方法还可以被简写成另外两种形式：localStorage['key']='value';或localStorage.key='value';由于localStorage和sessionStorage所使用的方法均来自于Storage接口，因此语法完全相同，可以根据存储性质选择其中一种使用。9.3.4存储数据如果存储的数据值中带有引号，则setItem()方法中键和值外边的引号使用另一种形式，以避免重复冲突。例如：localStorage.setItem('name','Hisnameis"Wallace".');或localStorage.setItem("name","Hisnameis'Wallace'.");9.3.4存储数据在Google浏览器的调试模式中可以查看Web存储的情况。正常打开Google浏览器并运行与Web存储有关的HTML5页面，然后按F12进入调试模式，点击“Resource”选项卡，即可查看当前页面的localStorage、sessionStorage和cookies等数据情况。9.3.4存储数据【例9-2】HTML5Web存储API之数据存储的简单应用

9.3.5读取指定数据在Storage接口中提供的getItem()方法可以用于获取指定了键名称的数据值。9.3.5读取指定数据在Storage接口中提供的getItem()方法可以用于获取指定了键名称的数据值。其语法结构如下：localStorage.getItem('name')或sessionStorage.getItem('name')9.3.5读取指定数据例如：varstudentID=localStorage.getItem('studentID');上述代码表示从localStorage存储的数据中读取键名称为studentID的数据值。如果该名称并不存在，则直接返回null值。9.3.5读取指定数据getItem()方法也可以省略，直接使用键名称代替。简写如下：localS或sessionS9.3.5读取指定数据例如，之前获取studentID的代码可以改写为：varstudentID=localStorage.studentID;简写后的内容与之前的完整代码作用完全相同。9.3.5读取指定数据但是需要注意的是，使用键名称代替getItem()方法的简写方式是在已知具体的键名称时方可使用。如果是变量则不可使用简写方式。例如：varx='studentID';varstudentID=localStorage.x;上述方法等同于查找键名称为x的数据值，与实际想要查找的键名称studentID无关。9.3.5读取指定数据【例9-3】存储和读取用户访问页面次数

9.3.6数据遍历如果需要读取所有的数据，可以先使用Storage接口中length属性获取数据的数目，如果返回值大于0就可以再使用key(n)方法依次获取每一条数据的键名称，然后根据键名称进一步获取到数据值。9.3.6数据遍历例如：//获取使用localStorage存储的数据总数varnum=localStorage.length;//进行存储数据的遍历for(vari=0;i<num;i++){//获取键名称varname=localStorage.key(i);//获取键值varvalue=localStorage.getItem(name);

}9.3.6数据遍历【例9-4】HTML5Web存储之数据遍历

9.3.7删除指定数据在Storage接口中提供的removeItem()方法可以用于删除指定了键名称的数据。9.3.7删除指定数据removeItem()方法的语法结构如下：localStorage.removeItem('name')或sessionStorage.removeItem('name')9.3.7删除指定数据执行removeItem()方法后数据可以被彻底删除，包括数据的键名称和对应的值。例如：localStorage.removeItem('test');上述代码表示在localStorage存储中删除键名称为test的数据值。如果提供的键名称无法匹配到已存储的数据信息，则本次不进行删除操作。9.3.7删除指定数据【例9-5】HTML5Web存储之删除指定数据

9.3.8清空所有数据在Storage接口中提供的clear()方法可以用于清空所有Web存储数据。9.3.8清空所有数据clear()方法的语法结构如下：localStorage.clear();或sessionStorage.clear();该方法不带任何参数，直接调用