本地存储WebStorage.ppt

第8讲本地存储WebStorage,传统Web应用程序将大多数据都存储在Web服务器端的数据库中，本地存储的能力很弱。而频繁地访问数据库服务器获取数据，不但会增加网络流量，而且影响应用程序的效率。HTML5的本地存储能力得到了很大的提高，不但可以像传统Web应用程序那样将数据存储在文件中，而且还支持本地的轻型数据库。,本章知识点,1概述2localstorage3sessionstorage,1概述,1.1HTML4的本地数据存储方式1.2HTML5本地存储技术概述,1.1HTML4的本地数据存储方式,在传统的Web程序中，通常使用Cookie和Session来存储本地数据。,1Cookie,Cookie存在如下缺陷,Cookie的数据大小是由限制的，大多数浏览器只支持最大为4096字节的Cookie。有时不能满足需求。客户端可以禁用或清空Cookie，从而影响程序的功能。当多人共用一台计算机时使用Cookie可能会泄露用户隐私，带来安全问题。,2Session（会话）,1.2HTML5本地存储技术概述,1localstorage2sessionstorage3webSQL数据库4IndexedDB,1localstorage,localstorage类似于Cookie，用于持久化的本地存储。但localstorage没有有效期，除非主动删除数据，否则数据是永远不会过期的。localstorage的存储能力也远大于Cookie，可以存储多达5MB的数据。,2sessionstorage,sessionstorage类似于Session，用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储。,3webSQL数据库,除了使用localstorage将数据存储在本地文件中，HTML5甚至支持本地的webSQL数据库。传统的Web应用程序都是使用脚本语言访问Web服务器上的数据库，但是访问服务器会产生网络流量，而且需要等待服务器的响应。操作本地数据库无疑大大提升了HTML5的本地数据存储能力。,4IndexedDB,IndexedDB是一种轻量级NoSQL数据库。NoSQL是非关系型的数据库，NoSQL是NotOnlySQL的缩写，意即反SQL运动，是一项全新的数据库革命性运动。HTML5支持两种不同类型的数据库，给了用户跟多的选择，足以应对各种需求的Web应用程序。,2localstorage,2.1浏览器对localstorage的支持情况2.2使用localstorage保存数据2.3获取localstorage中的数据2.4删除localstorage中的数据2.5storage事件,2.1浏览器对localstorage的支持情况,在JavaScript中可以使用window.localStorage属性检测浏览器对localstorage的支持情况。如果window.localStorage等于True，则表明当前浏览器支持localstorage；否则表明不支持。,【例1】,在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持localstorage。定义按钮的代码如下：检测浏览器是否支持localstorage,单击按钮check将调用check()函数。check()函数的定义代码如下,functioncheck()if(window.localStorage)alert(您的浏览器支持localstorage。);elsealert(您的浏览器不支持localstorage。);,提示,在使用InternetExplore测试时，必须将文件上传到Web服务器上（或者localhost），才支持localstorage。如果直接打开本地的HTML文件，则提示不支持localstorage。,2.2使用localstorage保存数据,localstorage使用“键值”对保存数据，可以使用setItem()方法设置localstorage数据，语法如下：localStorage.setItem(,)也可以通过localStorage.和localStorage的形式访问localstorage数据。例如，下面3条语句都可以在localstorage中存储键名为key、值为value的数据：localStorage.setItem(key,value);localStorage.key=value;localStoragekey=value;,【例2】,在网页中定义一个按钮，单击此按钮时，在localstorage中存储键名为key、值为value的数据。按钮的定义代码如下：使用localstorage保存数据,单击按钮check将调用setItem()函数。setItem()函数的定义代码如下：,functionsetItem()if(window.localStorage)localStorage.setItem(key,value);elsealert(您的浏览器不支持localstorage。);,2.3获取localstorage中的数据,可以使用getItem()方法设置localstorage数据，语法如下：=localStorage.getItem();也可以通过localStorage.和localStorage的形式访问localstorage数据。例如，下面3条语句都可以获取localstorage中存储的键名为key的数据值到变量value中：varvalue=localStorage.getItem(key);varvalue=localStorage.key;varvalue=localStoragekey;,【例3】,在网页中定义一个按钮，单击此按钮时，从localstorage中获取键名为key的值。按钮的定义代码如下：获取localstorage中的数据,【例3】,单击按钮将调用getItem()函数。getItem()函数的定义代码如下：functiongetItem()if(window.localStorage)varvalue=localStorage.getItem(key);alert(value);elsealert(您的浏览器不支持localstorage。);,functioncount()varcount/读取localstorage数据，并转换为int类型if(localStorage.getItem(count)=null)count=1elsecount=parseInt(localStorage.getItem(count)+1;/显示访问计数if(count1)document.write(您已是第+count+次访问本站点了。);elsedocument.write(欢迎您首次访问本站。);/保存新的访问计数localStorage.setItem(count,count);window.addEventListener(load,count,true);,【例4】,使用localstorage记录用户访问网页的次数,2.4删除localstorage中的数据,调用localStorage.removeItem()方法可以删除localstorage中指定键的项，语法如下：localStorage.removeItem(key)key为要删除的指定键。如果要删除localstorage中所有的数据，则可以调用localStorage.clear()方法。,2.5storage事件,HTML5提供一个storage事件，当setItem()、removeItem()或者clear()方法被调用，并且数据真的发生了改变时，storage事件就会被触发。注意，只有数据真的发生了变化，才会触发storage事件。也就是说，如果当前的存储区域是空的，调用clear()是不会触发事件的。或者通过setItem()来设置一个与现有值相同的值，storage事件也是不会被触发的torage事件的。,2.5storage事件,Event对象包含如下属性：storageArea，表示存储类型（localstorage或sessionstorage）；key，发生改变的项的keyoldValue，发生改变的项的原值newValue，发生改变的项的新值url，key改变发生的URL,【例5】,Yourtestdata:Waitingfordataviastorageevent.,接上,varaddEvent=(function()if(document.addEventListener)returnfunction(el,type,fn)if(el.length)for(vari=0;iel.length;i+)addEvent(eli,type,fn);elseel.addEventListener(type,fn,false);elsereturnfunction(el,type,fn)if(el.length)for(vari=0;iel.length;i+)addEvent(eli,type,fn);elseel.attachEvent(on+type,function()returnfn.call(el,window.event););)();,接上,vardataInput=document.getElementById(data),output=document.getElementById(fromEvent),save=document.getElementById(save);addEvent(window,storage,function(event)if(event.key=storage-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事件的支持情况不同。经测试，InternetExplorer9可以在当前页面中接收到storage事件，而在firefox和chrome中，必须同时打开两个窗口浏览【例5】，在其中一个窗口中单击按钮，在另一个窗口会接收到storage事件。,3sessionstorage,3.1判断浏览器是否支持sessionstorage3.2使用sessionstorage保存数据3.3获取sessionstorage中的数据3.4删除sessionstorage中的数据,3.1判断浏览器是否支持sessionstorage,在JavaScript中可以使用window.sessionStorage属性检测浏览器对sessionstorage的支持情况。如果window.sessionStorage等于True，则表明当前浏览器支持sessionstorage；否则表明不支持。,【例6】,在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持sessionstorage。定义按钮的代码如下：检测浏览器是否支持sessionstorage,【例6】,单击按钮check将调用check()函数。check()函数的定义代码如下：functioncheck()if(window.sessionStorage)alert(您的浏览器支持sessionstorage。);elsealert(您的浏览器不支持sessionstorage。);,提示,在使用InternetExplore测试时，必须将文件上传到Web服务器上（或者localhost），才支持localstorage。如果直接打开本地的HTML文件，则提示不支持localstorage。,3.2使用sessionstorage保存数据,与localstorage一样，sessionstorage也使用“键值”对保存数据，可以使用setItem()方法设置sessionstorage数据，语法如下：sessionStorage.setItem(,)也可以通过sessionStorage.和sessionStorage的形式访问sessionstorage数据。例如，下面3条语句都可以在localstorage中存储键名为key、值为value的数据：sessionStorage.setItem(key,value);sessionStorage.key=value;sessionStoragekey=value;,【例7】,在网页中定义一个按钮，单击此按钮时，在sessionstorage中存储键名为key、值为value的数据。按钮的定义代码如下：使用sessionstorage保存数据,【例7】,单击按钮check将调用setItem()函数。setItem()函数的定义代码如下：functionsetItem()if(window.sessionStorage)sessionStorage.setItem(key,value);elsealert(您的浏览器不支持sessionStorage。);,3.3获取sessionstorage中的数据,可以使用getItem()方法设置sessionstorage数据，语法如下：=sessionStorage.getItem();也可以通过localStorage.和localStorage的形式访问sessionstorage数据。例如，下面3条语句都可以获取localstorage中存储的键名为key的数据值到变量value中：varvalue=sessionStorage.getItem(key);varvalue=sessionStorage.key;,3.3获取sessionstorage中的数据,varvalue=sessionStoragekey;可以使用getItem()方法设置sessionstorage数据，语法如下：=sessionStorage.getItem();也可以通过localStorage.和localStorage的形式访问sessionstorage数据。例如，下面3条语句都可以获取localstorage中存储的键名为key的数据值到变量value中：varvalue=sessionStorage.getItem(key);varvalue=sessionStorage.key;varvalue=sessionStoragekey;,【例8】,在【例7】的网页中增加一个按钮，单击此按钮时，从sessionstorage中获取键名为key的值。按钮的定义代码如下：获取sessionstorage中的数据,【例8】,单击按钮getItem将调用getItem()函数。getItem()函数的定义代码如下：functiongetItem()if(window.sessionStorage)varvalue=sessionStorage.getItem(key);alert(value);elsealert(您的浏览器不支持sessionStorage。);,3.4删除sessionstorage中的数据,调用sessionStorage.removeItem()方法可以删除sessionStorage中指定键的项，语法如下：sessionStorage.removeItem(key)key为要删除的指定键。如果要删除sessionStorage中所有的数据，则可以调用sessionStorage.clear()方法。,大家辛苦了下课了,