CH10-HTML5-Web存储API

第10章HTML5Web存储API本章学习目标了解Web存储的概念；了解本地存储与会话存储方式的区别；熟悉Storage接口；掌握存储、读取、遍历和删除数据的方法。目录10.1Web存储技术概述10.2主流浏览器支持情况10.3HTML5Web存储API的应用10.1.1HTTPCookie存储10.1.2HTTP5Web存储10.1Web存储技术概述10.1.1HTTPCookie存储HTTPcookie由服务器端生成，将数据以“键-值”对(key-valuepairs)的形式发送给客户端浏览器，浏览器将这些数据保存至指定目录下的文本文件中，这样在下一次访问相同的网站时可以直接使用该cookie数据。HTTPcookie技术保存的数据名称和值都可以自定义，常见用于判断用户是否已登陆网站，或者保存购物车中等待付款的商品信息等。10.1.1HTTPCookie存储HTTPcookie最早设计出来是用于处理单个事务，存在以下问题，因此不太适用于存储大量数据：cookie的存储数据量小：一个cookie最多只能存放4096B左右的数据，并且部分浏览器对cookie有数量限制，比如IE8、Firefox、Opera等每个域名只能保存50个cookie。cookie请求限制：每次浏览器与服务器进行请求时，cookie都会存放在请求头部传输到服务器端。如果请求头部的大小过大，就会导致服务器无法处理。10.1.2HTTP5Web存储HTML5Web存储API和cookie存储方式类似，也是将数据以“键-值”对(key-valuepairs)的形式持久存储在Web客户端。相比HTTPcookie而言，HTML5的Web存储技术更适用于存储大量数据，其中IE每个域名下可以存放10M数据，而其他主流浏览器如Chrome、Firefox和Opera每个域名下也可以存放5M的数据量，并且发生请求时不会带上Web存储的内容。10.1.2HTTP5Web存储HTML5提供了两种客户端存储数据的方法：本地存储（localStorage）与会话存储（sessionStorage）。localStorage方法存储的数据没有时间限制，永久保存，并且数据可以被不同的网页页面共享使用。sessionStorage主要是针对一个session会话的数据存储，只能在创建session的网页中使用，当用户关闭浏览器窗口时，该数据将被删除。10.2主流浏览器支持情况10.3HTML5Web存储API的应用10.3.1检查浏览器支持情况10.3.2Storage接口10.3.3localStoragevssessionStorage10.3.4存储数据10.3HTML5Web存储API的应用10.3.5读取指定数据10.3.6数据遍历10.3.7删除指定数据10.3.8清空所有数据10.3.1检查浏览器支持情况在使用Web存储API之前，需要首先确认浏览器的支持情况。由于存储的数据库可以直接被HTMLDOM中的window对象访问，故最简单的检测方法是使用JavaScript代码分别检查window.localStorage或windows.sessionStorage是否存在。如果不存在，则说明浏览器不支持Web存储API。10.3.1检查浏览器支持情况检查浏览器是否支持localStorage的相关JavaScript代码如下：if(window.localStorage){//浏览器支持Web存储中的localStorage}else{//浏览器不支持Web存储中的localStorage}10.3.1检查浏览器支持情况检查浏览器是否支持sessionStorage的相关JavaScript代码和localStorage类似：if(window.sessionStorage){//浏览器支持Web存储中的sessionStorage}else{//浏览器不支持Web存储中的sessionStorage}10.3.1检查浏览器支持情况【例10-1】检测浏览器对HTML5Web存储的支持情况P35910.3.2Storage接口在HTML5Web存储API中，使用Storage接口实现本地存储（localStorage）或会话存储（sessionStorage）数据的添加、修改、查询或删除。10.3.2Storage接口如果希望使用localStorage，需要在JavaScript中声明window.localStorage方法，也可以省略window.前缀，直接写为localStorage；如果需要使用的是sessionStorage，同样可以在JavaScript中声明window.sessionStorage方法，或省略window.前缀，直接写为sessionStorage。10.3.2Storage接口Storage接口中包含了只读属性length，该属性返回值为整数形式，表示当前存储对象中“键-值”对的总数量。10.3.2Storage接口10.3.3localStoragevssessionStorage10.3.3localStoragevssessionStoragelocalStorage方法用于在客户端永久存储数据，该方法存储的数据没有过期时间，即使关闭了浏览器重新打开，数据也仍然保存在设备中可继续使用。sessionStorage方法和localStorage方法的语法结构均类似，只不过sessionStorage方法有时间限制，只能用于在浏览器打开的时间段（又称为一个session）中存储数据，若浏览器关闭则数据全部消失。10.3.4存储数据数据是以“键-值”对的方式进行存储的，每个数据值对应一个指定的键名称进行索引。10.3.4存储数据在Storage接口中提供的setItem()方法可以用于存储数据。其语法结构如下：localStorage.setItem('key','value');或sessionStorage.setItem('key','value');其中key换成需要存储的键名称（可自定义），value换成需要存储的数据值。这里的引号可以是单引号或双引号的任意一种。10.3.4存储数据setItem()方法还可以被简写成另外两种形式：localStorage['key']='value';或localStorage.key='value';由于localStorage和sessionStorage所使用的方法均来自于Storage接口，因此语法完全相同，可以根据存储性质选择其中一种使用。10.3.4存储数据如果存储的数据值中带有引号，则setItem()方法中键和值外边的引号使用另一种形式，以避免重复冲突。例如：localStorage.setItem('name','HisnameisWallace.');或localStorage.setItem(name,Hisnameis'Wallace'.);10.3.4存储数据在Google浏览器的调试模式中可以查看Web存储的情况。正常打开Google浏览器并运行与Web存储有关的HTML5页面，然后按F12进入调试模式，点击“Resource”选项卡，即可查看当前页面的localStorage、sessionStorage和cookies等数据情况。10.3.4存储数据【例10-2】HTML5Web存储API之数据存储的简单应用P36210.3.5读取指定数据在Storage接口中提供的getItem()方法可以用于获取指定了键名称的数据值。10.3.5读取指定数据在Storage接口中提供的getItem()方法可以用于获取指定了键名称的数据值。其语法结构如下：localStorage.getItem('name')或sessionStorage.getItem('name')10.3.5读取指定数据例如：varstudentID=localStorage.getItem('studentID');上述代码表示从localStorage存储的数据中读取键名称为studentID的数据值。如果该名称并不存在，则直接返回null值。10.3.5读取指定数据getItem()方法也可以省略，直接使用键名称代替。简写如下：localStorage.name或sessionStorage.name10.3.5读取指定数据例如，之前获取studentID的代码可以改写为：varstudentID=localStorage.studentID;简写后的内容与之前的完整代码作用完全相同。10.3.5读取指定数据但是需要注意的是，使用键名称代替getItem()方法的简写方式是在已知具体的键名称时方可使用。如果是变量则不可使用简写方式。例如：varx='studentID';varstudentID=localStorage.x;上述方法等同于查找键名称为x的数据值，与实际想要查找的键名称studentID无关。10.3.5读取指定数据【例10-3】存储和读取用户访问页面次数P36510.3.6数据遍历如果需要读取所有的数据，可以先使用Storage接口中length属性获取数据的数目，如果返回值大于0就可以再使用key(n)方法依次获取每一条数据的键名称，然后根据键名称进一步获取到数据值。10.3.6数据遍历例如：//获取使用localStorage存储的数据总数varnum=localStorage.length;//进行存储数据的遍历for(vari=0;inum;i++){//获取键名称varname=localStorage.key(i);//获取键值varvalue=localStorage.getItem(name);}10.3.6数据遍历【例10-4】HTML5Web存储之数据遍历P36710.3.7删除指定数据在Storage接口中提供的removeItem()方法可以用于删除指定了键名称的数据。10.3.7删除指定数据removeItem()方法的语法结构如下：localStorage.removeItem('name')或sessionStorage.removeItem('name')10.3.7删除指定数据执行removeItem()方法后数据可以被彻底删除，包括数据的键名称和对应的值。例如：localStorage.removeItem('test');上述代码表示在localStorage存储中删除键名称为test的数据值。如果提供的键名称无法匹配到已存储的数据信息，则本次不进行删除操作。10.3.7删除指定数据【例10-5】HTML5Web存储之删除指定数据P36910.3.8清空所有数据在Storage接口中提供的clear()方法可以用于清空所有Web存储数据。10.3.8清空所有数据clear()方法的语法结构如下：localStorage.clear();或sessionStorage.clear();该方法不带任何参数，直接调用clear()可以清空整个localStorage或sessionStorage对象中的所有数据。10.3.8清空所有数据【例10-6】HTML5Web存储之清空所有数据P37110.3.8清空所有数据【例10-6】HTML5Web存储之清空所有数据P371cont.本章小结本章小结HTML5新增Web存储API可以用于在客户端保存数据。根据存储时间不同，HTML5Web存储API包含两种存储方式：localStorage和sessionStorage。其中localStorage适用于永久存储数据，而sessionStorage只能维持在浏览器关闭前的数据状态。HTML5拖放API中包含了Storage接口，该接口提供了对于Web存储数据的添加、删除、读取、遍历等一系列功能。Thankyou！