课件教案第18章01初识web storage.pptxVIP

本讲大纲：1、Web Storage是什么 2、使用WebStorage中的API 3、sessionStorage和localStorage的实例——计数器 4、Web Storage综合实例——留言本 5、JSON对象的存数实例——用户信息卡 支持网站：www.mrbccd初识Web Storage Web Storage是什么 Web Storage功能，顾名思义，就是在Web上存储数据的功能，而这里的存储，是针对客户端本地而言的。它包含两种不同的存储类型：Session Storage和Local Storage。 不管是Session Storage还是Local Storage，它们都能支持在同域下存储5MB数据.sessionStorage 将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。Session对象可以用来保存在这段时间内所要求保存在任何数据。localStorage将数据保存在客户端本地的硬件设备中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用. 这两种不同的存储类型区别在于，sessionStorage为临时保存，而为永久保存使用WebStorage中的AP 下面我们讲解如何使用WebStorage的API。目前WebStorage的API有如下这些：Length：获得当前webstorage中的数目。key(n)：返回webstorage中的第N个存储条目。getItem(key)：返回指定key的存储内容，如果不存在则返回null。注意，返回的类型是String字符串类型。setItem(key, value)：设置指定key的内容的值为value。removeItem(key)：根据指定的key，删除键值为key的内容。clear：清空webstorate的内容。 数据的存储与获取 在localStorage中设置键值对数据可以应用setItem()，代码如下所示localStorage.setItem(key, value);获取数据可以应用getItem()，代码如下所示;var val = localStorage.getItem(key);当然也可以直接使用localStorage的key方法，而不使用setItem和getItem方法，如下；localStorage.key = value;var val = localStorage.key;HTML5存储是基于键值对（key/value）的形式存储的，每个键值对称为一个项（item）存储和检索数据都是通过指定的键名，键名的类型是字符串类型。值可以是包括字符串、布尔值、整数，或者浮点数在内的任意JavaScript支持的类型。但是，最终数据是以字符串类型存储的。调用结果是将字符串value设置到sessionStorage中，这些数据随后可以通过键key获取。调用setItem()时，如果指定的键名已经存在，那么新传入的数据会覆盖原先的数据。调用getItem()时，如果传入的键名不存在，那么会返回null，而不会抛出异常。 数据的删除和清空 removeItem()用于从Storage列表删除数据代码如下：var val = sessionStorage.removeItem(key);也可以通过传入数据项的key从而删除对应的存储数据代码如下var val = sessionStorage.removeItem(1);说明：数字1会被转换为string，因为key的类型就是字符串。clear()方法用于清空整个列表的所有数据，代码如下：sessionStorage.clear();同时可以通过使用length属性获取Storage中存储的键值对的个数：var val = sessionStorage.length;注意：removeItem可以清除给定的key所对应的项，如果key不存在则“什么都不做”；clear会清除所有的项，如果列表本来就是空的就“什么都不做”.sessionStorage和localStorage的实例——计数器 例18.1 本例主要是通过sessionStorage和localStorage对页面的访问量进行计数。当在文本框内输入数据后，分别可以单击“session保存”按钮和“local保存”按钮对数据进行保存，还可以通过“session读取”按钮和“local读取”按钮对数据进行读取。但是两种方法对数据的处理方式不一样，使用sessionStorage方法时，如果关闭了浏览器，这个数据就丢失了下一次打开浏览器，点击读取数据按钮时，读取不到任何数据。使用loc