《本地存储WebStorag.ppt》由会员分享，可在线阅读，更多相关《本地存储WebStorag.ppt（47页珍藏版）》请在三一办公上搜索。
1、第8讲 本地存储Web Storage,传统Web应用程序将大多数据都存储在Web服务器端的数据库中，本地存储的能力很弱。而频繁地访问数据库服务器获取数据，不但会增加网络流量，而且影响应用程序的效率。HTML5的本地存储能力得到了很大的提高，不但可以像传统Web应用程序那样将数据存储在文件中，而且还支持本地的轻型数据库。,本章知识点,1 概述 2 localstorage 3 sessionstorage,1 概述,1.1 HTML4的本地数据存储方式 1.2 HTML5本地存储技术概述,1.1 HTML4的本地数据存储方式,在传统的Web程序中，通常使用Cookie和Session来存储本地
2、数据。,1Cookie,Cookie存在如下缺陷,Cookie的数据大小是由限制的，大多数浏览器只支持最大为 4096 字节的 Cookie。有时不能满足需求。客户端可以禁用或清空Cookie，从而影响程序的功能。当多人共用一台计算机时使用Cookie可能会泄露用户隐私，带来安全问题。,2Session（会话）,1.2 HTML5本地存储技术概述,1localstorage 2sessionstorage 3web SQL数据库4IndexedDB,1localstorage,localstorage类似于Cookie，用于持久化的本地存储。但localstorage没有有效期，除非主动删除数
3、据，否则数据是永远不会过期的。localstorage的存储能力也远大于Cookie，可以存储多达5MB的数据。,2sessionstorage,sessionstorage类似于Session，用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储。,3web SQL数据库,除了使用localstorage将数据存储在本地文件中，HTML5甚至支持本地的web SQL数据库。传统的Web应用程序都是使用脚本语言访问Web服务器上的数据库，但是访问服务器会产生网络流量，而且
4、需要等待服务器的响应。操作本地数据库无疑大大提升了HTML5的本地数据存储能力。,4IndexedDB,IndexedDB是一种轻量级NoSQL数据库。NoSQL是非关系型的数据库，NoSQL是Not Only SQL的缩写，意即反SQL运动，是一项全新的数据库革命性运动。HTML5支持两种不同类型的数据库，给了用户跟多的选择，足以应对各种需求的Web应用程序。,2 localstorage,2.1 浏览器对localstorage的支持情况2.2 使用localstorage保存数据 2.3 获取localstorage中的数据 2.4 删除localstorage中的数据 2.5 stor
5、age事件,2.1 浏览器对localstorage的支持情况,在JavaScript中可以使用window.localStorage属性检测浏览器对localstorage的支持情况。如果window.localStorage等于True，则表明当前浏览器支持localstorage；否则表明不支持。,【例1】,在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持localstorage。定义按钮的代码如下：检测浏览器是否支持localstorage,单击按钮check将调用check()函数。check()函数的定义代码如下,function check()if(window.loca
6、lStorage)alert(您的浏览器支持localstorage。);else alert(您的浏览器不支持localstorage。);,提示,在使用Internet Explore测试时，必须将文件上传到Web服务器上（或者localhost），才支持localstorage。如果直接打开本地的HTML文件，则提示不支持localstorage。,2.2 使用localstorage保存数据,localstorage使用“键值”对保存数据，可以使用setItem()方法设置localstorage数据，语法如下：localStorage.setItem(,)也可以通过localStor
7、age.和localStorage的形式访问localstorage数据。例如，下面3条语句都可以在localstorage中存储键名为key、值为value的数据：localStorage.setItem(key,value);localStorage.key=value;localStoragekey=value;,【例2】,在网页中定义一个按钮，单击此按钮时，在localstorage中存储键名为key、值为value的数据。按钮的定义代码如下：使用localstorage保存数据,单击按钮check将调用setItem()函数。setItem()函数的定义代码如下：,function
8、setItem()if(window.localStorage)localStorage.setItem(key,value);else alert(您的浏览器不支持localstorage。);,2.3 获取localstorage中的数据,可以使用getItem()方法设置localstorage数据，语法如下：=localStorage.getItem();也可以通过localStorage.和localStorage的形式访问localstorage数据。例如，下面3条语句都可以获取localstorage中存储的键名为key的数据值到变量value中：var value=localS
9、torage.getItem(key);var value=localStorage.key;var value=localStoragekey;,【例3】,在网页中定义一个按钮，单击此按钮时，从localstorage中获取键名为key的值。按钮的定义代码如下：获取localstorage中的数据,【例3】,单击按钮将调用getItem()函数。getItem()函数的定义代码如下：function getItem()if(window.localStorage)var value=localStorage.getItem(key);alert(value);else alert(您的浏览器
10、不支持localstorage。);,function count()var count/读取localstorage数据，并转换为int类型 if(localStorage.getItem(count)=null)count=1 else count=parseInt(localStorage.getItem(count)+1;/显示访问计数 if(count 1)document.write(您已是第+count+次访问本站点了。);else document.write(欢迎您首次访问本站。);/保存新的访问计数 localStorage.setItem(count,count);win
11、dow.addEventListener(load,count,true);,【例4】,使用localstorage记录用户访问网页的次数,2.4 删除localstorage中的数据,调用localStorage.removeItem()方法可以删除localstorage中指定键的项，语法如下：localStorage.removeItem(key)key为要删除的指定键。如果要删除localstorage中所有的数据，则可以调用localStorage.clear()方法。,2.5 storage事件,HTML5提供一个storage事件，当setItem()、removeItem()或
12、者clear()方法被调用，并且数据真的发生了改变时，storage事件就会被触发。注意，只有数据真的发生了变化，才会触发storage事件。也就是说，如果当前的存储区域是空的，调用clear()是不会触发事件的。或者通过setItem()来设置一个与现有值相同的值，storage事件也是不会被触发的torage事件的。,2.5 storage事件,Event对象包含如下属性：storageArea，表示存储类型（localstorage或sessionstorage）；key，发生改变的项的key oldValue，发生改变的项的原值 newValue，发生改变的项的新值 url，key改变
13、发生的URL,【例5】,Your test data:Waiting for data via storage event.,接上,var addEvent=(function()if(document.addEventListener)return function(el,type,fn)if(el.length)for(var i=0;i el.length;i+)addEvent(eli,type,fn);else el.addEventListener(type,fn,false);else return function(el,type,fn)if(el.length)for(var
14、 i=0;i el.length;i+)addEvent(eli,type,fn);else el.attachEvent(on+type,function()return fn.call(el,window.event););)();,接上,var dataInput=document.getElementById(data),output=document.getElementById(fromEvent),save=document.getElementById(save);addEvent(window,storage,function(event)if(event.key=stora
15、ge-event-test)output.innerHTML=key:+event.key+-old:+event.oldValue+-new:+event.newValue;);addEvent(save,click,function()localStorage.setItem(storage-event-test,dataInput.value););,浏览【例5】的界面,提示,必须将文件上传到Web服务器上（或者localhost），才支持storage事件。不同浏览器对storage事件的支持情况不同。经测试，Internet Explorer 9可以在当前页面中接收到storage事
16、件，而在firefox和chrome中，必须同时打开两个窗口浏览【例5】，在其中一个窗口中单击按钮，在另一个窗口会接收到storage事件。,3 sessionstorage,3.1 判断浏览器是否支持sessionstorage 3.2 使用sessionstorage保存数据3.3 获取sessionstorage中的数据3.4 删除sessionstorage中的数据,3.1 判断浏览器是否支持sessionstorage,在JavaScript中可以使用window.sessionStorage属性检测浏览器对sessionstorage的支持情况。如果window.sessionSt
17、orage等于True，则表明当前浏览器支持sessionstorage；否则表明不支持。,【例6】,在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持sessionstorage。定义按钮的代码如下：检测浏览器是否支持sessionstorage,【例6】,单击按钮check将调用check()函数。check()函数的定义代码如下：function check()if(window.sessionStorage)alert(您的浏览器支持sessionstorage。);else alert(您的浏览器不支持sessionstorage。);,提示,在使用Internet Explo
18、re测试时，必须将文件上传到Web服务器上（或者localhost），才支持localstorage。如果直接打开本地的HTML文件，则提示不支持localstorage。,3.2 使用sessionstorage保存数据,与localstorage一样，sessionstorage也使用“键值”对保存数据，可以使用setItem()方法设置sessionstorage数据，语法如下：sessionStorage.setItem(,)也可以通过sessionStorage.和sessionStorage 的形式访问sessionstorage数据。例如，下面3条语句都可以在localstora
19、ge中存储键名为key、值为value的数据：sessionStorage.setItem(key,value);sessionStorage.key=value;sessionStorage key=value;,【例7】,在网页中定义一个按钮，单击此按钮时，在sessionstorage中存储键名为key、值为value的数据。按钮的定义代码如下：使用sessionstorage保存数据,【例7】,单击按钮check将调用setItem()函数。setItem()函数的定义代码如下：function setItem()if(window.sessionStorage)sessionStor
20、age.setItem(key,value);else alert(您的浏览器不支持sessionStorage。);,3.3 获取sessionstorage中的数据,可以使用getItem()方法设置sessionstorage数据，语法如下：=sessionStorage.getItem();也可以通过localStorage.和localStorage的形式访问sessionstorage数据。例如，下面3条语句都可以获取localstorage中存储的键名为key的数据值到变量value中：var value=sessionStorage.getItem(key);var value
21、=sessionStorage.key;,3.3 获取sessionstorage中的数据,var value=sessionStorage key;可以使用getItem()方法设置sessionstorage数据，语法如下：=sessionStorage.getItem();也可以通过localStorage.和localStorage的形式访问sessionstorage数据。例如，下面3条语句都可以获取localstorage中存储的键名为key的数据值到变量value中：var value=sessionStorage.getItem(key);var value=sessionSt
22、orage.key;var value=sessionStorage key;,【例8】,在【例7】的网页中增加一个按钮，单击此按钮时，从sessionstorage中获取键名为key的值。按钮的定义代码如下：获取sessionstorage中的数据,【例8】,单击按钮getItem将调用getItem()函数。getItem()函数的定义代码如下：function getItem()if(window.sessionStorage)var value=sessionStorage.getItem(key);alert(value);else alert(您的浏览器不支持sessionStorage。);,3.4 删除sessionstorage中的数据,调用sessionStorage.removeItem()方法可以删除sessionStorage中指定键的项，语法如下：sessionStorage.removeItem(key)key为要删除的指定键。如果要删除sessionStorage中所有的数据，则可以调用sessionStorage.clear()方法。,大家辛苦了下课了,
