JerryQu的小站 » 本地存储

如何使用Flash来实现本地存储

Jerry Qu — Fri, 12 Sep 2008 15:56:51 +0000

我在5月份的一篇文章里列举了一些本地存储解决方案，包括常见的Cookie、UserData和不是那么常见的globalStorage、Database Storage。文章最后提到了另外两种解决方案：Google Gear和Flash，当时因为觉得用不上就没仔细研究。但实际应用中，那篇文章列出的方案还是不能满足项目的需求。这篇文章就讲一下如何使用Flash来实现本地存储，以及该方案使用的场合。

拿IE6来说，如果要在本地大量存放数据，Cookie因为存放内容太少、浪费用户带宽首先就应该被淘汰掉。UserData在大多数情况下能满足需求，但是它也有一个致命的弱点：只能读取同目录存储，也就是a目录下一个文件不能读取b目录下两一个文件存放的数据。MSDN说明如下：

Security Alert For security reasons, a UserData store is available only in the same directory and with the same protocol used to persist the store. 全文>>

也就是说如果项目中要跨文件夹操作本地存储，UserData也必须被淘汰了。IE不支持Database Storage，IE8才增加了对globalStorage的支持，这个时候Flash就派上用场了。

首先，打开Flash，建立一个工程，编写get、set、remove三个方法并提供给外部程序调用：

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.net.SharedObject;
import flash.system.Security;
import flash.external.ExternalInterface;
import flash.utils.Timer;

public class Main extends Sprite {

   Security.allowDomain("*");//修改为自己的域名
   private const storageName:String = "data";

   public function Main() {
   addExternalInterface();
   }

   private function addExternalInterface():void {
   function set(key:String, val:String = ""):void {
   var sobj:SharedObject = SharedObject.getLocal(storageName, "/", false);
   sobj.data[key] = val;
   sobj.flush();
   }

   function get(key:String):String{
   var sobj:SharedObject = SharedObject.getLocal(storageName, "/", false);
   return(sobj.data[key]);
   }

   function remove(key:String):void{
   var sobj:SharedObject = SharedObject.getLocal(storageName, "/", false);
   delete sobj.data[key];
   sobj.flush();
   }

   function isJavaScriptReady():Boolean {
   var isReady:Boolean = ExternalInterface.call("isJSReady");
   return isReady;
   }

   function jsReadyHandler():void {
   trace("javascript js ready");
   ExternalInterface.addCallback("set", set);
   ExternalInterface.addCallback("get", get);
   ExternalInterface.addCallback("remove", remove);
   ExternalInterface.call("flashReadyHandler");
   }

   if (ExternalInterface.available) {
   try {
   if (isJavaScriptReady()) {
   jsReadyHandler();
   }else {
   var timerReady:Timer = new Timer(100, 0);
   timerReady.addEventListener(TimerEvent.TIMER, function(evt:TimerEvent):void {
   trace("checking...");
   if (isJavaScriptReady()) {
   Timer(evt.target).stop();
   jsReadyHandler();
   }
   });
   timerReady.start();
   }
   }catch (err:SecurityError) {
   trace(err.message);
   }catch (err:Error) {
   trace(err.message);
   }
   }
   }
}
}

其中，核心功能是依靠SharedObject来实现的。对于这个对象，Adobe官方说明如下：

Shared objects are quite powerful: they offer real-time data sharing between objects that are persistent on the local location. You can think of local shared objects as “cookies.”

You can use local shared objects to maintain local persistence. This is the simplest way to use a shared object. For example, you can call SharedObject.getLocal to create a shared object, such as a calculator with memory, in the player. Because the shared object is locally persistent, Flash saves its data attributes on the user’s machine when the movie ends. The next time the movie runs, the calculator contains the values it had when the movie ended. Alternatively, if you set the shared object’s properties to null before the movie ends, the calculator opens without any prior values the next time the movie runs. 全文>>

补充一下，SharedObject存储在本地的内容是可以跨浏览器读取的，也就是在IE中存储的内容，可以在firefox中读到，这是一个比较有用的特性。另外，SharedObject一般把内容存在下列位置：

Windows XP：C:\Documents and Settings\[1]\Application Data\Macromedia\Flash Player\#SharedObjects\[2]\[3]\[4].sol

Windows Vista：C:\Users\[1]\AppData\Roaming\Macromedia\Flash Player\#SharedObjects\[2]\[3]\[4].sol
([1]:系统当前用户,[2]:随机字符目录,[3]:网站域名,[4]:SharedObject对象名)

然后用把编译得到的swf文件加到页面中，利用js来调用flash中对应的三个方法就OK了，具体方法都写在演示文件里，就懒得贴出来了。演示地址在这里。（~~请用IE浏览器打开~~）

update：更新了demo，支持所有的浏览器。

跨浏览器的本地存储解决方案

Jerry Qu — Fri, 30 May 2008 07:43:55 +0000

有时候我们在前端开发中为了提高用户体验，减少向服务器请求的次数，常常要在用户的电脑上存储数据，即要实现浏览器的本地存储数据功能。我在这里整理了一下常用的几种方案。

1.针对IE6以上(含)内核的浏览器，我们可以使用UserData 行为（userData Behavior）

说明：

userData 行为通过将数据写入一个UserData存储区（UserData store）来保存数据，userData可以将数据以XML格式保存在客户端计算机上，如果你用的是 Windows 2000 或者 Windows XP，是保存在C:\Documents and Settings\Liming\UserData\文件夹下（如果操作系统不是安装在C盘，那么C就应该是操作系统所在的分区）。该数据将一直存在，除非你人为删除或者用脚本设置了该数据的失效期。userData行为提供了一个比Cookie更具有动态性和更大容量的数据结构。每页的UserData 存储区数据大小可以达到64 Kb，每个域名可以达到640 Kb。userData 行为通过sessions为每个对象分配UserData存储区。使用save和load方法将UserData存储区数据保存在缓存（cache）中。一旦UserData存储区保存以后，即使IE浏览器关闭或者刷新了，下一次进入该页面，数据也能够重新载入而不会丢失。出于安全的考虑，相同协议使用同一个文件夹保存UserData存储区数据。

使用：

（1）首先必须在行内或文档的head部分声明如下样式：

.userData {behavior:url(#default#userdata);}

或者使用如下js代码来声明：

document.documentElement.addBehavior(”#default#userdata”);

（2）成员：

expires 设置或取得使用userData行为保存数据的失效日期，使用方法：对象ID.expires = UTC格式的时间字符串；

getAttribute() 取得指定的属性值；

load(存储区名) 从userData存储区载入存储的对象数据；

removeAttribute() 删除指定的属性值；

save(存储区名) 将对象存储到一个userData存储区；

setAttribute() 设置指定的属性值；

XMLDocument 取得存储该对象数据的XML DOM引用

（3）示例：

document.documentElement.addBehavior("#default#userdata");

document.documentElement.load("t");

document.documentElement.setAttribute("value", "test");

document.documentElement.save("t");

2.针对Firefox2(含)以上内核的浏览器，我们可以使用globalStorage

说明：

This is a global object (globalStorage) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g. over multiple pages and browser sessions).

Specifically, the globalStorage object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used globalStorage on this domain (developer.mozilla.org) we’d have the following storage object available to us:

globalStorage[’developer.mozilla.org’] – All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.

使用：

globalStorage[location.hostname]["t"] = "test";//赋值

var ret = globalStorage[location.hostname]["t"];//取值

globalStorage.removeItem("t");//删除

备注：

在firefox2中，我们可以在test00.aa.test.com 上的页面内使用globalStorage[“test.com“][“t“]=“test“来赋值，但是到了firefox3这么做却会得到一个错误提示，原因是firefox3的安全策略要求在使用 globalStorage时，指定的域名和实际的域名必须严格匹配！

3.Database Storage，HTML5里的内容，目前仅有Safari支持

说明：

This section is non-normative.

使用：

init:function(){
if(!this._inited){
this._db.transaction(function(t){
t.executeSql(“CREATE TABLE “+this.name+” (k TEXT UNIQUE NOT NULL PRIMARY KEY, v TEXT NOT NULL)”,[],function(){});
},function(){});
this._inited = true;
}
},
get:function(key,fn){
var ret = “”;
this._db.transaction(function(t){
t.executeSql(“SELECT v FROM “+this.name+” Where k=?”, [key], function(t, r){
if(r.rows.length>0){
ret=r.rows.item(0)['v'];
if(fn)fn.call(this,ret);};
},function(){
if(fn)fn.call(this,ret);
});
});
},
set:function(key,value){
this.remove(key);
this._db.transaction(function(t){
t.executeSql(“INSERT INTO “+this.name+” (k,v) VALUES (?, ?)”, [key,value],function(){});
},function(){});
},
remove:function(key){
this._db.transaction(function(t){
t.executeSql(“DELETE FROM “+this.name+” WHERE k=?”, [key],function(){});
},function(){});
}

4.针对其它浏览器，如常见的Opera，我们可以使用Cookie

说明：

A cookie is a small piece of information stored by the browser. Each cookie is stored in a name=value; pair called a crumb—that is, if the cookie name is “id” and you want to save the id’s value as “this”, the cookie would be saved as id=this. You can store up to 20 name=value pairs in a cookie, and the cookie is always returned as a string of all the cookies that apply to the page. This means that you must parse the string returned to find the values of individual cookies.

Cookies accumulate each time the property is set. If you try to set more than one cookie with a single call to the property, only the first cookie in the list will be retained.

You can use the Microsoft® JScript® split method to extract a value stored in a cookie.

使用：

function SetCookie(sName, sValue){var date = new Date(); document.cookie = sName + "=" + escape(sValue) + "; expires=" + date.toGMTString(); } function GetCookie(sName){ var aCookie = document.cookie.split("; "); for (var i=0; i < aCookie.length; i++){ var aCrumb = aCookie[i].split("="); if (sName == aCrumb[0]) return unescape(aCrumb[1]); } return null; } function DelCookie(sName){ document.cookie = sName + "=" + escape(sValue) + "; expires=Fri, 31 Dec 1999 23:59:59 GMT;"; }

备注：

现代浏览器一般默认都支持cookie，但是使用cookie也有几个致命的弱点：存储的信息量太少，页面向服务器发送请求的同时cookie也会被发送，无形中浪费用户的带宽。

5.其它解决方案

Google Gear：Google开发出的一种本地存储技术；

Flash：利用Flash也可以实现本地存储

这两种方法的优点是：能支持所有的OS和浏览器(Google Gear目前仅支持IE5+和Firefox1.5+)；缺点是需要用户安装额外的插件，使用起来不如前面其它3种方法简便。

6.一些链接

DOM:Storage

HTTP cookies

Flash Local Storage

Internet Explorer userData behavior

http://www.whatwg.org/specs/web-apps/current-work/#sql

safari的一些杂记