基于HTML 5的前端本地化存储技术

　　引言

　　目前，Web 2.0给互联网用户带来了新的网络应用方法，具有诱人的应用前景，本地化存储一直是本地客户端程序优于Web应用程序的一个方面，对于本地应用程序，操作系统会提供一个抽象层，用于存储和获取特定于应用程序的数据，这些数据可以存储于注册表、INI文件，或者其他什么地方，这取决于操作系统的实现，如果本地应用程序需要不单是键值对形式的本地存储，可以使用嵌入式数据库或其他很多种解决方案，HTML 5本地存储技术提供了一种方式让网站能够把信息存储到本地的计算机上，并在以后需要的时候进行获取，这个概念和Cookie相似，区别则是它是为更大容量存储设计的，而Cookie的大小是受限的，并且每次请求一个新的页面时候，Cookie都会被发送过去，HTML 5的Storage是存储在计算机上的，网站在页面加载完毕后可以通过Javascript来获取这些数据。

　　1 主要的前端存储技术

　　目前，本地存储技术主要有Cookie，Flash Sharedobject，Goole Gears和User Data.

　　(1) Cookie.在Web中得到广泛应用，但其局限性非常明显，容量太小，有些站点会因为出于安全的考虑而禁用Cookie，因为Cookie的内容会随着页面请求一并发往服务器。

　　(2) Flash SharedObject.其使用的是kissy的store模块来调用Flash SharedObject. Flash SharedObject的优点是容量适中，基本上不存在兼容性问题，缺点是要在页面中引入特定的swf和js文件，增加额外负担，且处理繁琐。

　　(3) GoogleGears是一个基于Firefox和IE的插件，要使用它，必须先安装相应插件，但其官方网站目前已经停止更新。

　　(4)User Data.其是微软为IE专门在系统中开辟的一块存储空间，只支持Windows+IE的组合，在XP操作系统中，一般位于C：\Documents and Set-tings、用户名、UserData，有时候会在C：\Documentsand Settings\用户名\Application Data\Microsoft\Internet Explorer\UserData下，在Vista操作系统中，位于C：、Users\用户名、AppData\Roaming\Mi-crosoft\Intemet Explorer\UserData，使用save和load方法可将UserData存储区数据保存在缓存中，一旦保存后，即使浏览器关闭，下一次进入该页面，数据仍然存在，对单个文件的大小限制是128 KB，一个域名下总共可以保存1024 KB的文件，文件个数没有限制，在受限站点里这两个值分别是64 KB和640KB，所以如果考虑到各种情况的话，单个文件以控制在64 KB以下为宜。

　　2 HTML 5本地存储技术

　　HTML 5技术的功能之一是本地存储数据并且允许应用程序离线运行，其有3种不同的处理这些功能的方式：①Web Storage，适用于具有key/value对的基本本地存储;②离线存储，利用一个manifest文件来高速缓存所有文件以便离线使用;③Web数据库，适用于关系型数据库存储。

　　2.1 Web Storage

　　在HTML 5技术标准中，除了动态图像、位置服务、多媒体播放功能外，另一个新增的非常重要的功能就是可以在客户端本地保存数据的Web storage功能，该功能使用key/value对来支持存储被Web应用程序访问基本信息和变量，具体来说，有以下2种方式。

　　(1) sessionStorage.session，是指用户在浏览网页的时候，从进入网页开始到浏览器关闭的这段时间内，将数据保存在session对象中，这里的session对象可以用来保存在此时间段内的所有需要存储的数据，具体为：

　　保存数据：sessionStorage，setltem( key，value)，

　　读取数据：变量=sessionStroage，getltem( key)，

　　清除数据：sessionStorage. clear()，

　　(2)localStorage.不同于sessionStorage，localStorage将数据保存在客户端本地的硬件设备中，通常是硬盘，即使关闭了浏览器，该数据依然存在，下次访问的时候仍然可以继续使用，具体为：

　　保存数据：localStorage，setltem( key，value)，

　　读取数据：变量= localStorage. getltem( key)，

　　清除数据：localStorage， clear()，

　　需说明的是，以上2种方式在保存数据时均采用按键名/键值的形式，保存后可以修改键值，但不允许修改键名，为了避免保存时使用到重复的键名，可以使用当前日期和时间作为键名来保存，其JavaScript代码为：

　　var key= new Date().getTime();

　　storage对象，setltem( key，value)，

　　2.2离线存储

　　目前，Web应用程序已经变得越来越成熟了，有时仅通过Web Storage存储一些基本数据显然不能满足用户的需求，为了让整个应用程序在没有网络的状态下也能正常工作，就必须把构成该应用的Flash、图片、CSS、HTML、JS等大量文件存放在本地存储中，此时，即便计算机没有与网络连接，也可以通过本地的资源文件来运行该Web应用程序。

　　Web应用程序的本地缓存是通过页面的Manifest文件来管理的，Manifest是一个位于Web服务器上的文件，它以清单的形式展示了需要缓存和不需要缓存的文件，Manifest文件的示例为：

　　CACHE MANIFEST

　　CACHE:

　　welcorne. html

　　stle，css

　　scnpt.js

　　img/search.png

　　img/logo.png

　　NETWORK:

　　index.html

　　FALIBACK:

　　linel.js line2.js

　　loginl.htmllogin2，html

　　在Manifest文件中，第一行必须是CACHE MAINFEST，它的作用是告知浏览器，此时需要对资源文件进行缓存处理操作。
(本文不涉密)
责任编辑：

转载：感谢您对网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处。