前端开发lec7 web存储

Web存储

版本管理修改记录

审核记录版本号.作者描述修改日期V01肖志谭FirstDraft20121208V02袁文哲20130827版本号.职务签名修改日期主要内容web存储简介html5的web存储机制web离线版本的实现web存储案例应用web存储简介存储是根据不同的应用环境通过采取合理、安全、有效的方式将数据保存到某些介质上并能保证有效的访问，总的来讲可以包含两个方面的含义：一方面它是数据临时或长期驻留的物理媒介；另一方面，它是保证数据完整安全存放的方式或行为。存储就是把这两个方面结合起来，向客户提供一套数据存放解决方案。web存储简介长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势。对于桌面应用（或者原生应用)，操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据。例如（用户配置信息或者运行时状态等)。常见的存放这些数据的方式有许多：注册表，INI文件，XML文件等等。除了上面这些比较简单的用来存放键值对的存储形式，如果需要使用更加复杂强大的存储，那么还可以进一步在应用程序中嵌入小型数据库，或者开发出特定的数据文件格式。web存储发展史web存储发展史cookie：在很长时间里Cookies是唯一可以使用的在用户本地存储少量数据的方法。但Cookies有一些非常明显的缺陷，限制了它的应用:cookie会被附加在每个HTTP请求中，所以无形中增加了流量。由于在HTTP请求中的cookie是明文传递的，所以安全性成问题。（除非你的整个应用都是使用SSL来构建的)cookie的大小限制在4KB左右。对于复杂的存储需求来说是不够用的。web存储发展史UserData：

是微软为IE专门在系统中开辟的一块存储空间，所以说只支持Windows+IE的组合，实际测试在2000（IE5.5）、XP（IE6、IE7），Vista（IE7、IE8）下都是可以正常使用的。单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB，所以如果考虑到各种情况的话，单个文件最好能控制64KB以下。web存储发展史FlashSharedObject：使用kissy的store模块来调用FlashSharedObject。FlashSharedObject的优点是容量适中，基本上不存在兼容性问题，缺点是要在页面引入特定的swf和js文件，增加额外负担，处理繁琐；还是有部分机子没有flash运行环境。web存储发展史GoogleGears：

Google的离线方案，已经停止更新，官方推荐使用html5的localStorage方案。Gears是一个通过插件技术来增强浏览器功能的开源项目。Gears提供了一套API来访问一个基于SQLite的嵌入式SQL数据库，在获得用户的一次性授权后，应用程序可以通过Gears存储不限数量的本地数据。

localStorage：相对于上述本地存储方案，localStorage有自身的优点：容量大、易用、强大、原生支持；缺点是兼容性差（chrome、safari、firefox、IE9、IE8都支持localStorage，主要是IE8以下版本不支持）、它保存的数据并不进行加密，所以虽然webstorage功能很强大，但也不宜保存比较敏感的数据html5的web存储机制HTML5提供了两种在客户端存储数据的新方法localStorage-没有时间限制的数据存储sessionStorage-针对一个session的数据存储注：localStorage和sessionStorage的方、属性和使用都一样，只是有使用时间这一点不同html5的web存储机制sessionStorage:是针对用户执行单个事务的方案而设计的，仅在单个页面（标签或者窗口）会话范围内是有效的。所以当页面session失效时，数据也会删除；localStorage:是跨多个窗口，且持续范围可超过当前会话；意味着当浏览器关闭再重新打开，数据依然是可用的；

这两种类型的对象，在不同的浏览器之间访问数据是无效的；例如，我们在Firefox中创建localStorage,要在IE中去访问，是访问不到数据的html5的web存储机制html5WebStorage非常易于Web开发者使用，他提供了非常简单的获取或设置key-value对的API；支持的数据大小由网页浏览器厂商来决定，大多数支持都是5M或10M以上；这就意味着，我们可以在客户端存储更多有关用户及会话的信息，诸如用户个人设置、本地化数据、离线数据等；WebStorage存储的数据可能用javascript来进行访问；LocalStorage本地存储说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示：Cookie的概念与分类Cookie（复数形态Cookies），中文名称为小型文本文件或小甜饼[1]，指某些网站为了辨别用户身份而储存在用户本地终端（ClientSide）上的数据（通常经过加密）。定义于RFC2109。为网景公司的前雇员LouMontulli在1993年3月所发明。Cookie总是保存在客户端中，按在客户端中的存储位置，可分为内存Cookie和硬盘Cookie。Cookie的用途因为HTTP协议是无状态的，即服务器不知道用户上一次做了什么，这严重阻碍了交互式WEB应用的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么。所以Cookie就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话中的状态。Cookie的用途在刚才的购物场景中，当用户选购第一项商品，服务器在向用户发送网页的同时，还发送了一段Cookie，记录着那项商品的信息。当用户访问另一个页面，浏览器会把Cookie发送给服务器，于是服务器知道他之前选购了什么。用户继续选购饮料，服务器就在原来那段Cookie里追加新的商品信息。结帐时，服务器读取发送来的Cookie就行了。Cookie的用途Cookie另一个典型的应用是当登录一个网站时，网站往往会请求用户输入用户名和密码，并且用户可以勾选“下次自动登录”。如果勾选了，那么下次访问同一网站时，用户会发现没输入用户名和密码就已经登录了。这正是因为前一次登录时，服务器发送了包含登录凭据（用户名加密码的某种加密形式）的Cookie到用户的硬盘上。第二次登录时，（如果该Cookie尚未到期）浏览器会发送该Cookie，服务器验证凭据，于是不必输入用户名和密码就让用户登录了。Cookie的缺陷cookie会被附加在每个HTTP请求中，所以无形中增加了流量。由于在HTTP请求中的cookie是明文传递，所以安全性成问题。（除非用HTTPS)Cookie的大小限制在4KB左右。对于复杂的存储需求来说是不够用的。检测浏览器支持本地存储首先自然是检测浏览器是否支持本地存储。在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者用法完全相同，这里以localStorage为例。if(window.localStorage){

alert('This

browser

supports

localStorage');

}else{

alert('This

browser

does

NOT

support

localStorage');

}存储数据存储数据的方法就是直接给window.localStorage添加一个属性，例如：window.localStorage.a

或者

window.localStorage["a"]。它的读取、写、删除操作方法很简单，是以键值对的方式存在的，如下：localStorage.a

=

3;//设置a为"3"

localStorage["a"]

=

"sfsf";//设置a为"sfsf"，覆盖上面的值

localStorage.setItem("b","isaac");//设置b为"isaac"

var

a1

=

localStorage["a"];//获取a的值

var

a2

=

localStorage.a;//获取a的值

var

b

=

localStorage.getItem("b");//获取b的值

localStorage.removeItem("c");//清除c的值存储数据这里最推荐使用的自然是getItem()和setItem()，清除键值对使用removeItem()。如果希望一次性清除所有的键值对，可以使用clear()。另外，HTML5还提供了一个key()方法，可以在不知道有哪些键值的时候使用，如下：var

storage

=

window.localStorage;

function

showStorage(){

for(var

i=0;i<storage.length;i++){

//key(i)获得相应的键，再用getItem()方法获得对应的值

document.write(storage.key(i)+

"

:

"

+

storage.getItem(storage.key(i))

+

"<br>");

}

}WebStorage属性方法WebStorage属性方法setItem存储value用途：将value存储到key字段用法：.setItem(key,value)代码示例： sessionStorage.setItem("key","value"); localStorage.setItem("site","js8.in");getItem获取value用途：获取指定key本地存储的值用法：.getItem(key)代码示例：

varvalue=sessionStorage.getItem("key"); varsite=localStorage.getItem("site");WebStorage属性方法removeItem删除key用途：删除指定key本地存储的值用法：.removeItem(key)代码示例： sessionStorage.removeItem("key"); localStorage.removeItem("site");clear清除所有的key/value用途：清除所有的key/value用法：.clear()代码示例： sessionStorage.clear(); localStorage.clear();WebStorage属性方法sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历代码示例： varstorage=window.localStorage; for(vari=0,len=storage.length;i<len;i++){ varkey=storage.key(i); varvalue=storage.getItem(key); console.log(key+"="+value); }WebStorage事件WebStorage事件所有支持localStorage对象的浏览器都支持存储事件，也包括IE8。不过由于IE8不支持W3C标准的addEventListener（IE9支持）。因此要在不同浏览器中侦听存储事件，仍需要兼顾浏览器事件处理机制的不同。

if(window.addEventListener){ window.addEventListener("storage",handle_storage,false); }else{ window.attachEvent("onstorage",handle_storage); };上面代码中handle_storage是在存储事件发生时被调用的回调函数，传入参数是StorageEvent。在IE中，该event对象会被保存在window.event中

functionhandle_storage(e){ if(!e){e=window.event;} }WebStorage使用测试浏览器是否支持localStorage

functionsupports_html5_storage(){ try{ return'localStorage'inwindow&&window['localStorage']!==null; } catch(e){ returnfalse; } }WebStorage使用HTML5存储是基于键值对的。数据存储在一个键里，访问数据时可以根据同样的键获得上次存储的数据.键是一个字符串.而数据则可以是任何类型的JavaScript基本数据类型，包括字符串，Boolean，整数，和浮点数.不过需要注意的是，这些数据在存储时实际上是以字符串保存的。因此在访问数据时你需要利用parseInt()或parseFloat()方法来做数据类型的转换WebStorage使用如果在调用setItem时使用一个已经存在的键，将会直接覆盖掉该键上保存的值。而调用getItem时传入一个不存在的键，则会返回一个null，不会抛出异常。像其他JavaScript对象一样，你也可以将localStorage对象当成是关联数组使用(associativemap)

除了使用getItem和setItem之外，可以使用中括号的方式来引用数据.例如如果removeItem传入一个不存在的key则无操作，也不会有异常Web离线版本的实现HTML5引入应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问使用HTML5，通过创建cachemanifest文件，可以轻松地创建web应用的离线版本应用程序缓存为应用带来三个优势：离线浏览--用户可在应用离线时使用它们速度--已缓存资源加载得更快减少服务器负载--浏览器将只从服务器下载更新过或更改过的资源所有主流浏览器均支持应用程序缓存，除了IECacheManifest基础如需启用应用程序缓存，请在文档的<html>标签中包含manifest属性每个指定manifest的页面在用户对其访问时都会被缓存。如果未指定manifest属性，则页面不会被缓存（除非在manifest文件中直接指定了该页面）manifest文件的建议的文件扩展名是：".appcache"。manifest文件需要配置正确的MIME-type，即"text/cache-manifest"。必须在web服务器上进行配置。CacheManifest基础manifest文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）manifest文件可分为三个部分：CACHEMANIFEST

-在此标题下列出的文件将在首次下载后进行缓存NETWORK

-在此标题下列出的文件需要与服务器的连接，且不会被缓存FALLBACK

-在此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）CacheManifest基础CACHEMANIFEST

第一行，CACHEMANIFEST，是必需的：

上面的manifest文件列出了三个资源：一个CSS文件，一个GIF图像，以及一个JavaScript文件。当manifest文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。CacheManifest基础NETWORK

NETWORK小节规定文件“login.asp”永远不会被缓存，且离线时是不可用的，可以使用星号来指示所有其他资源/文件都需要因特网连接：

CacheManifest基础FALLBACK FALLBACK小节规定如果无法建立因特网连接，则用“offline.html”替代/html5/目录中的所有文件。说明：第一个URI是资源，第二个是替补

更新缓存更新缓存一旦应用被缓存，它就会保持缓存直到发生下列情况：用户清空浏览器缓存manifest文件被修改：例如编辑了一幅图片，或者修改了一个JavaScript函数，这些改变都不会被重新缓存由程序来更新应用缓存一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使修改了服务器上的文件。为了确保浏览器更新缓存，需要更新manifest文件更新缓存更新缓存

以"#"开头的是注释行，但也可满足其他用途。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。Web存储案例应用HTML5Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用localStorage（本地存储）,可以长期存储数据，没有时间限制，一天，一年，两年甚至更长，数据都可以使用sessionStorage（会话存储），只有在浏览器被关闭之前使用，创建另一个页面时同意可以使用，关闭浏览器之后数据就会消失Web存储案例应用代码代码如下:<htmlxmlns=""><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><styletype="text/css">#t0{width:320px;}textarea{width:300px;height:300px;}.button{width:100px;}Web存储案例应用</style></head><body><scripttype="text/javascript">//使用HTML5Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。//页面参考如后面效果图，能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。functionsaveSession(){vart1=document.getElementById("t1");vart2=document.getElementById("t2");varmydata=t2.value;varoStorage=window.sessionStorage;Web存储案例应用oStorage.mydata=mydata;t1.value+="sessionStorage保存mydata:"+mydata+"\n";}functionreadSession(){vart1=document.getElementById("t1");varoStorage=window.sessionStorage;varmydata="不存在";if(oStorage.mydata){mydata=oStorage.mydata;}t1.value+="sessionStorage读取mydata:"+mydata+"\n";}Web存储案例应用functioncleanSession(){vart1=document.getElementById("t1");varoStorage=window.sessionStorage;varmydata="不存在";if(oStorage.mydata){mydata=oStorage.mydata;}oStorage.removeItem("mydata");t1.value+="sessionStorage清除mydata:"+mydata+"\n";}functionsaveStorage(){vart1=document.getElementById("t1");vart2=document.getElementById("t2");Web存储案例应用varmydata=t2.value;varoStorage=window.localStorage;oStorage.mydata=mydata;t1.value+="localStorage保存mydata:"+mydata+"\n";}functionreadStorage(){vart1=document.getElementById("t1");varoStorage=window.localStorage;varmydata="不存在";if(oStorage.mydata){mydata=oStorage.mydata;}t1.value+="localStorage读取mydata:"+mydata+"\n";}Web存储案例应用functioncleanStorage(){vart1=document.getElementById("t1");varoStorage=wi