Web开发中的本地存储常常用来存储一些与用户相关的特定信息到用户本地硬盘，比如用户对网站设置的一些偏好选择如网页皮肤外观，具有时效性的用户登录认证信息，保存用户表单填写的数据以避免反复填写或者提交时网络故障导致填写数据丢失，以及存储一些需要常用到的数据集以减少网页重复加载时对网络数据的请求。在不同客户端平台下的本地存储已有多种现实的解决方案，用得最广泛的如Cookie，但存在数据量较小，不能跨浏览器共享，使用API不友好等缺陷，作为对cookie的补充，在一些需求中以userData Behavior、HTML5 local storage，以及Flash SharedObject技术实现的本地存储方案也有应用。

Rookie 即是一款用于Web开发实现本地存储功能的脚本小插件，采用 JavaScript 和 SWF 文件通信，通过调用Flash SharedObject对象完成本地数据存储。沿着网上已有方案的思路进行了一些功能拓展与完善，更方便第三方使用，下面加以介绍。

特点

1. 支持跨浏览器，兼容目前主流浏览器（IE6-IE9/Firefox/Safari/Opera/Chrome）；
2. 支持跨域读写本地存储，采用跨域授权许可机制，安全可控；
3. 支持多种数据格式，Number、String、Array、JSON、Date 等数据不需额外代码进行解析转换；
4. 数据容量较大，默认情况每条数据最多可存储100k （cookie每个最大4k）；
5. 内置调试机制，方便使用；
6. 需浏览器端支持Flash，如不支持对其他代码不造成影响，使用时可考虑“预留退路”编程思维。

使用方法

1. 下载程序文件：https://code.google.com/p/rookiee/downloads/list ，并解压；
2. 上传 release 文件包中的 src/rookie.swf 和 src/Rookie.js文件到应用服务器；
3. 页面中通过以下方式引用Rookie.js 文件：
   

   <script type="text/javascript" src="src/Rookie.js?src/rookie.swf"></script>

4. 注 意，需要将 rookie.swf 文件的路径作为参数传递，可以使用相对路径和绝对路径；如用 http 路径跨域引用 swf 文件，需在 swf 所在目录配置 policy.txt 文件以授权跨域许可；policy.txt 放在 swf 同目录下，以“行”为单位列出同意授权的域名，如需授权任意域名输入一个 * 符号即可；本地存储数据始终在 swf 文件对应域下，跨域使用 swf 文件即可实现 Rookie 数据的跨域读写。
5. 在ie9 beta 版中存在Javascript无法调用Flash函数的Bug，如需兼容 ie9 beta，需要在html的head标签中加入：
   

   <meta http-equiv="X-UA-Compatible" content="IE=7" />

6. 按照 release/index.html 文件源码中的注释说明进行使用

API

所有功能封装在一个全局函数 Rookie 中，Rookie 函数接收一个匿名函数作为参数，即是Rookie初始化成功后的回调函数。所有对本地存储数据的操作必须在回调函数的内部进行，因为只有 Rookie 初始化成功后才可以使用本地存储功能；可以多次调用Rookie函数并传递不同内容的回调函数。

Rookie(function(){

	/*

	写入键值示例，第一个参数是键名，第二个参数是键值，键值支持以下多种数据格式：
	Number、String、Array、JSON、Date

	*/

	this.write("myID","rukey67");//键值为字符串格式
	this.write("rukey",{local:"广州",sex:"male"});//键值为JSON式
	this.write("somedata",[234,534523,234234]);//键值为数组
	this.write("createTime",new Date());//键值为时间格式

	/*

	取一个键值，如果过期或者未设置，返回 undefined;
	判断是否有可用数据可以通过以下方式判断：
	if(this.read("abc")){ some code;  }
	或：if(this.read("abc")==undefined){ some code; }

	*/

	var r=this.read("myID");	//读取键名为 myID 的数据并赋值给 r

	this.clear("myID");//删除键名为 myID 的本地数据;

	/***************华丽分隔线*****************************

	写入键值时可以带一个json格式的可选参数，包含两个可选属性:
	crossBrowser：布尔值，是否跨浏览器，缺省值为true允许跨浏览器；
	expire：整型数值，以天为单位的过期时间，缺省值为0，永不过期；

	使用示例如下：

	*/

	this.write("netease","My company",{crossBrowser:false,expire:30});
});

调试

在服务器运行示例页面 index.html ，可以在IE9/Firefox/Safari/Opera/Chrome 调试工具的 控制台面板查看到调试信息。以下为 firebug 中的调试信息:

在其他浏览器的开发工具中同样支持调试：

ie9：自带工具 developer tools，按 F12 键启动
Firefox：附加组件 firebug，按 F12 键启动
opera10：自带工具 dragonfly，按 ctrl+shift+i 启动
Safari4：自带工具，按 ctrl+alt+c 启动
Chrome ：自带工具（和Safari的极其类似），按 ctrl+shift+i 启动

数据存储位置

• Windows 95/98/ME/2000/XP：
  c:/Documents and Settings/username/Application Data/Macromedia/Flash Player/#SharedObjects
• Windows Vista/Windows 7：
  c:/Users/username/AppData/Roaming/Macromedia/Flash Player/#SharedObjects
• Macintosh OS X：
  /Users/username/Library/Preferences/Macromedia/Flash Player/#SharedObjects/web_domain/path_to_application/application_name/object_name.sol
• Linux/Unix：
  /home/username/.macromedia/Flash_Player/#SharedObjects/web_domain/path_to_application/application_name/object_name.sol

一点说明

此插件基于JavaScript和Flash，和所有客户端程序一样，可用性受客户端软件环境设置影响。目前个人电脑平台不支持Flash的客户端浏览器 与不支持Javascript的浏览器统计数据相差不大，JavaScript得到广泛运用，适当地使用一些Flash应该问题不大。退一步讲，客户端脚本主 要是用来提升用户交互体验和优化web性能，运用好 渐进增强平稳退化 的开发思维，可以在不影响核心功能实现的前提下给一些配置满足程序要求的用户提供更好的访问体验。

建议继续学习：

1. 浏览器的工作原理：新式网络浏览器幕后揭秘    (阅读：19513)
2. 浅析http协议、cookies和session机制、浏览器缓存    (阅读：15758)
3. HFile存储格式    (阅读：14520)
4. 从输入 URL 到页面加载完成的过程中都发生了什么事情？    (阅读：14461)
5. 我对技术方向的一些反思    (阅读：9851)
6. 淘宝图片存储架构    (阅读：9809)
7. 海量小文件存储    (阅读：7539)
8. HBase技术介绍    (阅读：6736)
9. 程序员眼里IE浏览器是什么样的    (阅读：6819)
10. 浏览器的渲染原理简介    (阅读：6363)