VBScript实现Word和Excel的打印

只要是安装了Microsoft Office的Word和Excel电脑,微软都为我们提供了Word和Excel的COM组件,方便我们以COM对象访问的形式操纵Word或Excel文件,今天介绍个小功能,那就是打印。

首先是Word的打印,基本上的流程就是创建Word.Application对象,然后调用Documents.Open的方式打开doc文件,然后执行PrintOut方法打印文件,然后Close关闭,最后退出并销毁Word.Application对象。

Option Explicit

Const MSWORD_FILENAME = "Word文件路径"
Sub VBMain()
  Dim wdApp, Doc
  Set wdApp = WSH.CreateObject("Word.Application")
  wdApp.Visible = False
  Set Doc = wdApp.Documents.Open(MSWORD_FILENAME)
  Doc.PrintOut
  Doc.Close
  Set Doc = Nothing
  wdApp.Visible = True
  wdApp.Quit
  Set wdApp = Nothing
End Sub

Call VBMain()
WSH.Quit()

最后介绍下Excel的打印,同样的道理,创建对象,打开要打印的工作簿,选择要打印的工作表,打印,然后关闭工作表,退出并销毁对象。同样的一些操作可以参考Excel的VBA手册 《Microsoft Excel Visual Basic参考》

Option Explicit

Const MSEXCEL_FILENAME = "Excel文件路径"
Sub VBMain()
  Dim xlApp, WorkBooks, Sheet
  Set xlApp = WSH.CreateObject("Excel.Application")
  xlApp.Visible = False
  Set WorkBooks = xlApp.Workbooks.Open(MSEXCEL_FILENAME)
  
  Set Sheet = WorkBooks.Worksheets(1)  '打开第一个工作表
  ' 也可以打开上次保存时打开的活动工作表
  ' Set Sheet = WorkBooks.ActiveSheet  打开活动的工作表
  Sheet.PrintOut
  Set Sheet = Nothing

  WorkBooks.Close
  Set WorkBooks = Nothing
  xlApp.Quit
  Set xlApp = Nothing
End Sub

Call VBMain()
WSH.Quit()

对于想批量打印的朋友可以参考我这篇文章 《采用插件机制的批量文件扫描及进程处理工具》

Posted in:
  • VBScript/JavaScript/Python
  • 系统应用程序开发
Tagged
  • excel
  • word
  • 文档打印

MySQL控制台命令备忘

mysql

# 登录MySQL
>mysql -h 127.0.0.1 -u root -p 123456
# -h(ost) 127.0.0.1即为主机名
# -u(ser) 登录用户名
# -p(asswd) 登录密码,建议留空,然后提示再手动输入

# 出现下面这个即表示登录成功
mysql>

# 下面的操作必须以;结束
# 添加用户和赋权
mysql>grant select,insert,update,delete
mysql>on *.* to user1@"%" Identified by "passwd1";
# 创建赋予用户user1在*.*上选择(select)、插入(insert)
# 更新(update)、删除(delete)的权限
# *.*即所有数据库的所有表,也可以指定数据库或者指定数据库下属的表
# to 用户名@指定的登录机器,"%"表示任何机器
# 单独限制为比如localhost请写成user1@localhost
# Identified by 即user1的密码

# 显示所有数据库
mysql>show databases;

# 创建数据库
mysql>create database database1;
# database1即要创建的数据库名称

# 显示某数据库中的表
mysql>use mysql;
# 打开名称为mysql的数据库
mysql>show tables;
# 显示表结构
mysql>describe table1;
# table1即表名称

# 创建表
mysql>use database1;
mysql>create table1(字段定义);

# 退出
mysql>exit

mysqladmin

# 修改密码
# mysqladmin -u 用户名 -p 旧密码 password 新密码
# 给root设置密码123
>mysqladmin -u root -password 123
# 默认初始密码为空

# 再将root的密码改为456
>mysqladmin -u root -p 123 password 456
Posted in:
  • 网络编程与数据库
  • Web开发及相关
Tagged
  • mysql
  • 数据库

网页文字禁止复制与解决方法

原文发表于2009年4月12日 标题是《解除某些网站文字不能复制的问题》

经常在查阅某些网站时会出现文字无法复制的问题,其实是这些网站通过JavaScript脚本做了一定限制,我们可以通过下面的代码解除这个限制:

javascript:with(document.body){oncontextmenu='';ondragstart='';onselectstart='';onselect='';oncopy='';onbeforecopy='';onmouseup='';}void(0);

以上代码为 一行 ,具体用法是打开那个不能复制文字的网页,然后全选地址栏网址,删除全选的网址,再将这段代码粘贴到地址栏中,注意前面不要留空格(即必须以javascript开头),最后回车。然后你就会发现网页的内容就能复制了。

2011年3月29日更新

这段代码的原理是什么呢?我们先谈谈如何限制或者禁止浏览者复制网页上的文字,正常的防止浏览者复制文字,我们肯定是想到禁用用户的某些特定的操作,比如鼠标右键,选择,复制等等,而这些操作对应了相应的脚本事件,只要给这些事件加上一个方法,让其返回false就可以“吃”掉这个操作了,一般的禁止复制的脚本代码如下:

with(document.body) {
  oncontextmenu=function(){return false}
  ondragstart=function(){return false}
  onselectstart=function(){return false}
  onbeforecopy=function(){return false}
  onselect=function(){document.selection.empty()}
  oncopy=function(){document.selection.empty()}
}

无非就是禁止了类似于oncontextmenu(鼠标右键菜单)、onselectstart和onselect(禁止选择)等等,所以找到问题的根本,就可以用上面讲的办法清空这些return false的函数了,清空后就可以复制了。

写在最后

禁止用户复制网页上的文字还有禁止鼠标右键什么的是极其糟糕的做法,违反了用户体验的根本原则,这样做让用户容易反感进而不再回访你的网站,访客忠诚度也是衡量一个网站成功与否的重要标志之一,所以要留住用户,设计必须以用户为中心。更何况这些小伎俩也很容易破解,比如另存网页,禁用脚本,查看源代码等等,所以还是不要做限制为好。

2012年4月9日更新

通常情况下我们可能不想这么复杂的解决这类问题,比如说某网页文字无法复制,网页无法右击等等限制,我们可不希望慢慢的找到这段代码,然后选中,然后复制,然后粘贴,然后按回车,简直太麻烦了。接下来我将介绍个简单的利用上面这段代码的办法,那就是对下面这个链接右击,在菜单中选择添加到收藏夹:

点击解除网页限制

这样,下次再遇到受限的网页页面时就可以直接打开收藏夹,然后点下你添加的“点击解除网页限制”就可以了,怎么样,够简单的吧。

Posted in:
  • 前端开发与用户体验
  • Web开发及相关
Tagged
  • javascript
  • Web安全

C/C++使用本机CryptoAPI实现随机字符串

原文发表于2008年9月13日 标题是《C/C++使用本地CryptoAPI实现随机字符串》

随机字符串的应用还是比较广泛的,比如随机的窗体标题(防止被FindWindow),随机的加密密匙,用户注册的随机密码等等。

实现一个随机字符串,很多朋友可能会想到标准的C/C++头文件提供的库函数,但是这通常是需要引入C/C++运行时支持库的,有时在做一个纯Win32 API的程序肯定要考虑程序代码的通用以及较小的体积的问题,下面我用代码说明一下如何使用本地的CryptoAPI实现随机字符串。

如果有朋友对于CryptoAPI不太了解的话可以去查看MSDN的相关说明,这套API为安全方面的加密解密等等提供了良好的支持。

由于CryptoAPI生成的不是随机的ASCII字符串,所以我们需要一个函数,其作用是将16进制转换为ASCII码。(这段代码如需在C语言环境下工作请将函数参数引用以指针方式实现)

Posted in:
  • Windows编程技术
  • 系统应用程序开发
Tagged
  • 随机算法
  • win32api

使用JavaScript脚本框架实现HTML5+CSS3网页兼容

现在网页技术发展的很快,连网页制作标准都有了HTML5版的了,不过很多朋友可能都在观望,担心新技术会不兼容于老爷车式的浏览器,同时也不愿意写上那么多的Hack来确保兼容,但是大家可能和我一样也垂涎于HTML5这个新技术带来的新特性,大家都在观望,希望出现个吃螃蟹的人,不过这样的人已经有了,在这里淘宝网就开始尝试用HTML5新技术布局了,就目前看来,各项技术良好,而且保持了绝大多数浏览器的兼容。如果我们想用HTML5布局网站但想少写或者不写CSS Hack什么的,有什么便捷的办法呢?这点已经有人为我们铺好道路了,网上一些JavaScript脚本框架减轻了我们的工作,可以让我们放心大胆的去实践新的HTML5技术了。具体的一些框架我总结了下,不全的话可以提出来:

1. html5shiv - HTML5 IE enabling script

让低版本IE支持HTML5标签,主要是一些类似于header、footer等这样的标签,不过测试下来,貌似IE5.5支持不是很好的,这个大家应该没必要介意了,这么古董的浏览器还是比较少的。

项目主页 : http://code.google.com/p/html5shiv/

当然你可以直接借助Google的代码托管库这样写到你的HTML5文档里:

<!--[if lt IE 9]>
< script src ="http://html5shiv.googlecode.com/svn/trunk/html5.js"></ script >
<![endif]-->

2. css3-mediaqueries-js - make CSS3 Media Queries work in all browsers (JavaScript library)

这个主要是实现CSS3的media Queries属性兼容的,说直接点就是为不同媒体设备实现不同的分辨率的CSS样式而准备的,比如台式机访问是一种分辨率样式,手机访问是另外一种分辨率样式,具体可以参考 《CSS3 Media Queries》 这篇文章。当然如果没有为指定设备的指定分辨率设置CSS,就可以不用这个脚本帮忙了。

项目主页 : http://code.google.com/p/css3-mediaqueries-js/

3. ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser.

看名字就晓得这个又是为IE准备的,的确,这个主要是为了让低版本的IE看起来更符合标准,其修复了一些低版本IE的不符合标准的问题,当然不单单是HTML5 + CSS3可以采用,XHTML + CSS2也可以试一试。

项目主页 : http://code.google.com/p/ie7-js/

也可以直接使用Google的代码托管库这样写:

<!--[if lt IE 9]>
< script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></ script >
<![endif]-->

当你引用了IE9.js就不需要再引用IE8.js或者IE7.js了,因为IE9.js包含了这两个脚本的内容。

4. Modernizr

具体介绍可以参考 《Taking Advantage of HTML5 and CSS3 with Modernizr》 ,幸运的是我找到了一篇翻译的中文资料 《Modernizr——为HTML5和CSS3而生》 ,说到底这是个HTML5和CSS3的特性检测器,它能自动检测浏览器是否支持相应的特性并且还能将不支持特性的某些class样式符加上前缀no-,这样就大大方便了我们在面对不兼容浏览器时实现优雅的降级。

项目主页 : http://www.modernizr.com/ (可能无法访问)

目前主页可能无法访问,不过大家可以通过 github上托管项目 进行下载。

5. Google Font API

貌似这个和JavaScript没有关系,好吧,我承认这个是CSS的实现,目的是让网站使用一些用户电脑上没有的字体,不过前提是这些字体Google Web Font目录下必须存在,其实是调用的谷歌的一个接口,有了这个我们就能放心大胆的使用一些特殊的字体而不用担心用户有没有安装了。

项目主页 : http://code.google.com/apis/webfonts/docs/getting_started.html

Posted in:
  • 前端开发与用户体验
  • Web开发及相关
Tagged
  • 浏览器兼容
  • css
  • html5

使用Closure Compiler压缩并优化JavaScript性能

大家可能还记得之前我写的 《使用YUI Compressor优化你的网页》 这篇文章,主要介绍的是雅虎的YUI Compressor工具,这个工具主要用来压缩JavaScript或CSS,当然效果不错,近日在逛Google Code时偶然发现了个好东东Closure Compiler,恩,也是今天介绍的主角。这个是做什么用的呢?看到我的文章标题,大家心里应该有数了吧,Closure Compiler是个强大的脚本优化利器,其主要是用来优化JavaScript,那我为什么还要说压缩呢,原来其在优化的过程中会压缩相应的JS脚本,比如把长变量名变成短变量名,这点和YUI Compressor类似,但是这两个东东究竟有什么区别呢,我认为YUI Compressor强调的是压缩,Closure Compiler强调的是优化,当然明显Closure Compiler要强大些,具体的区别也已经有人总结过了,大家可以移步 这里

在其项目主页上可以看到下面的介绍:

Closure Compiler is a JavaScript optimizing compiler. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. It is used in many of Google's JavaScript apps, including Gmail, Google Web Search, Google Maps, and Google Docs.

看来功能真的很强大,许多谷歌应用都采用了这个东东进行优化,看来其是有谷歌官方背景的,这样我们可以放心大胆的用到我们项目里,提升我们的脚本性能了。

说了这么多,下面我就简单的介绍下如何获得并使用。

首先登录项目主页 closure-compiler ,然后下载程序包。解压下来,大家可能发现这是个Java程序,虽说是个Java程序,但是.jar文件已经有4MB多大小,足见其源代码的规模也不小。

当然想要运行的话,计算机上必须安装JRE的Java运行时环境,没有安装的童鞋可以在 这里下载

我们把compiler.jar复制到指定的目录下,然后通过下面的命令行进行相关操作。

java -jar compiler.jar --js=src.js --js_output_file=dest.js

其中--js所指示的src.js就是待优化的脚本源文件,--js_output_file所指示的就是优化压缩好的脚本目标文件。

不过使用IE条件注释的童鞋会发现,原来的条件注释被过滤掉了,非常遗憾,这个东东暂时还不能支持IE的条件注释,我建议先用(function(){/*TODO : Code*/})();闭包的形式闭包住条件注释里的脚本代码,然后去掉外围的条件注释Wrapper,然后让条件注释里的代码一起参与优化,由于这些代码是闭包的,当然就很容易在优化过的代码中区别出来,然后再加上条件注释的Wrapper就可以了。

Posted in:
  • 前端开发与用户体验
  • Web开发及相关
Tagged
  • javascript
  • 网站优化

去掉网页上链接或按钮的虚线框

经常用鼠标在链接或按钮上点击时会出现虚线框,很多朋友常常想去掉这个不雅的虚线框,但是我个人还是觉得去掉虚线框还是要谨慎为好,为什么呢,因为当你去掉虚线框后表面上确实美观了很多,用鼠标点击链接或按钮时顿觉清爽,但是这同时还带来了可访问性和易用性的下降,为什么这么说呢,因为有些童鞋习惯上用键盘快速的定位并访问相关的链接或按钮,当你去掉虚线框后,就意味着这些对象可能无法获得焦点(focus),或者浏览者可能无法感知到焦点的存在,当然也就不能被定位了。我们不能单纯的去做网站,做网页要考虑的问题很多,特别是做到无障碍浏览往往比较困难,如果真的要去掉虚线框而不失去可访问性的话,解决的方案可以考虑加上accesskey属性,当然旁边可以做些注解或者提示,让访问者能够使用快捷键方式访问这些不能被焦点定位的对象。

下面简单介绍下去掉虚线框的几种方式。

1.CSS样式表的outline属性(IE9、FF等浏览器推荐)

对于最新的IE9浏览器以及FireFox里可以使用outline:none,去掉虚线框,当然FF下还可以写成-moz-outline:none。

a:focus {
  outline:none;
  -moz-outline:none;
}

2.IE的hidefocus=true属性(IE8及以下版本推荐)

对于版本低于IE9的IE浏览器,我们可以使用hidefocus方法,就比如:

<a href="index.php" hidefocus="true"></a>

3.onfocus事件的this.blur();

这个方法效果比较好,但是感觉语义化不好,原理是在获得焦点时去掉焦点。

<a href="index.php" onfocus="this.blur();"></a>

好吧,介绍了这三种办法,下面我们可以分情况整合一下,比如如果是IE9或者FF等浏览器就采用CSS的outline方法。如果是其它情况就尝试使用hidefocus或者this.blur()方法。对于JavaScript的方法可以采用遍历的方式。

var anchors = document.getElementsByTagName('a');
for (var i=0; i < anchors.length; i++) {
	anchors[i].hideFocus = true;
}

// 或者采用this.blur()的方式,比如像下面这样写
var anchors = document.getElementsByTagName('a');
for (var i=0; i < anchors.length; i++) {
	anchors[i].onfocus = function() {
		this.blur();
	}
}

上面的办法有个缺点,就是遍历了所有的A链接标签,可能有些链接我们依然希望它能够有虚线框,如何只让指定的链接去除虚线框呢?对于IE9及FF、Chrome、Safari等浏览器,我们依然可以通过outline:none的形式去除,当然我们可以定义一个指定的CSS样式比如.hidefocus,就像下面那样:

.hidefocus:focus {
  outline:none;
  -moz-outline:none;
}

然后我们就通过<a class="hidefocus" href="index.php">链接文本</a>这种形式指定去掉该链接的虚线框。对于IE9以下版本的IE浏览器该怎么办呢?其实我们可以通过遍历class为hidefocus的链接然后再hideFocus或者this.blur()去除。 遍历class的办法有getElementsByClassName,不过可惜的是IE9以下不支持这个方法,当然有人写过全兼容版本的getElementsByClassName,大家可以看看我这里找到的一个 getElementsByClassName 版本。

然后在引入getElementsByClassName方法后HTML代码可以这样插入一段脚本了。

<!--[if lt IE 9]>
<script type="text/javascript">
addDOMLoadEvent(
    function() {
        var anchors = getElementsByClassName('hidefocus');
	for (var i=0; i<anchors.length; i++) {
		anchors[i].hideFocus = true;
	}
    }
);
</script>
<![endif]-->

这里的addDOMLoadEvent可以参考 《使用DOMContentLoaded取代部分window.onload》 ,关于if lt IE 9条件注释可以参考 《CSS设置样式时区分不同版本IE的办法》 。这样这段脚本就专门针对IE9及以下浏览器的class为hidefocus设置.hideFocus = true的属性,然后配合CSS的outline:none,基本就完美了。

Posted in:
  • 前端开发与用户体验
  • Web开发及相关
Tagged
  • javascript
  • css
  • 虚线框

JavaScript本地存储(5) : 实际运用及总结

任何的技术如果不能运用到最终产品中那么只能永远是理论上的东西,前面我分了4篇介绍了JavaScript本地存储,下面应该介绍一下实际运用及代码整合了,为什么要整合呢,看过我前面文章的朋友应该知道有些功能是新版本浏览器才有的比如localStroage,有的功能是某些浏览器特有的比如IE专享的userData等,还有一些是功能上比较弱的,比如Cookie,它支持的存储空间就有限,如何才能统筹这些存储功能的资源,以及如何在一个功能不支持的情况下能另寻蹊径从而实现优雅的降级是我们这章要讨论的内容,我们要利用现有的本地存储的模式,做到尽可能的全兼容,最优兼容。

对于浏览器支持的存储模式我们可以采用一种线性探测,即以localStorage > globalStorage > userData > Cookie的优先级探测可支持的本地存储的模式,如何判断浏览器是否支持一种存储模式,我们可以修改一下先前提供的IStorage接口,接口改变如下:

var IStorage = function() {
  this.setItem = function(key, value) {}
  this.getItem = function(key) {}
  this.remove = function(key) {}
  this.isAvailable = function() {}
}

由此可见,我们增加了this.isAvailable的接口函数,顾名思义,这个接口函数的功能就是判断存储模式是否被支持的,那么先前讲解的Cookie、UserData、DOMStorage类就要实现这个接口了。具体实现如下:

var Cookie = function() {
  // 其余代码略
  this.isAvailable = function() {
     return !!navigator.cookieEnabled;
  }
}

var UserData = function() {
  // 其余代码略
  this.isAvailable = function() {
    return !!document.all;
  }
}

var DOMStorage = function() {
  // 其余代码略
  this.isAvailable = function() {
    return !!this.domStorage;
  }
}

对于判断Cookie是否开启,我们可以通过navigator.cookieEnabled这个属性,前面两个感叹号是将非0值、0值、NULL等强制转换为布尔值,因为我们规定isAvailable返回的是布尔值,即true or false。对于UserData的判断,由于是IE专有的属性,那么只要判断是不是IE即可,我们用到判断IE专用的document.all属性进行IE识别,DOMStorage由于初始化会进行自动赋值,如果localStorage或者globalStorage不存在的话this.domStorage将为null,所以我们只需要判断this.domStorage即可。

到这里我们接口也改良过了,下面到核心部分,就是灵活判断并选择最优的存储方案。当然我们需要用到上一章讲解的StorageFactory类工厂,算法实现如下:

var createStorage = function() {
  var storage,namelist = ['DOMStorage', 'UserData', 'Cookie'];
  for (var i=0; i<namelist.length; i++) {
    storage = StorageFactory.create(namelist[i]);
        if (storage.isAvailable())
          return storage;
  }
  return null;
}

然后我们就可以通过createStorage来实现创建本地存储,然后调用接口定义的setItem、getItem、remove等方法了,怎么样是不是很方便。

最后整合好的js文件在这里 JStorage.js

Posted in:
  • 前端开发与用户体验
  • Web开发及相关
Tagged
  • javascript
  • 本地存储

JavaScript本地存储(4) : 设计模式之类工厂

很多人可能问我为什么要谈设计模式,我们只要把产品做出来而且能用就可以了啊,为什么要去搞那种难懂的软件工程,有这个时间还不如多学一些编程技巧呢,很长一段时间我和你们有同样的想法,但是后来随着项目越做越多我才突然发现过去一直忽略了这个重要的事情,良好的软件架构,良好的设计模式将会使你的软件的后期维护得到事半功倍的效果,我相信谁也不想总是重复的去写已经写过的代码,谁也不想把时间浪费在复制粘贴,然后就是无止境的DEBUG中,我们可以有更多的时间做更有意义的事情,难道不是吗?

最近我在研究Aaron Saray的《Professional PHP Design Patterns》(中译本:《PHP设计模式》),里面的讲解相当精彩,至少有些合理的软件构架将对我们有很大帮助,那么前面几期关于JavaScript本地存储我们已经谈了很多了,现在我要揭开为什么要定义先前那个IStorage接口,对的,那是因为设计模式,我们在这里阐述一下经典的设计模式——工厂模式。

关于使用设计模式的好处可以参考百度UFO的 《从 if else 到 switch case 再到抽象》 这篇文章。

好的,下面我们继续,我们知道所有的本地存储都是实现的IStorage接口,那么我们可以构建出一个工厂类(也叫类工厂)叫StorageFactory,类定义很简单,如下:

var StorageFactory = {
    create : function(name) {
     return eval("new " + name + "()");
    }
 }

这里的定义和先前的定义略有不同,因为我们想让这个工厂类作为一个静态(static)类存在,所以定义的方式有所区别,静态类的方便之处就是可以不用new而直接调用create方法,create方法有一个参数就是name,这里的name就是先前几章讲的各种各样的本地存储类,比如Cookie、UserData、DOMStorage或者是你自己扩展的类,这些类要使用必须要通过new关键字,工厂类的核心就是根据提供的名称create一个实例,当然我们提供的是字符串名称,不是代码,这时我们可以先拼接出“new StorageClass()”这样的字符串,然后请eval来帮忙生成对象。当然下面的事情就简单起来了,比如调用如下:

// TODO : 这里放
 //《JavaScript本地存储(1) : 使用Cookie》Cookie类
 // TODO : 这里放
 // 《JavaScript本地存储(2) : IE Only的userData》UserData类
 // TODO : 这里放
 // 《JavaScript本地存储(3) : DOM Storage》DOMStorage类
 var StorageFactory = {
    create : function(name) {
     return eval("new " + name + "()");
    }
 }
 var storage;
 // 创建Cookie实例
 storage = StorageFactory.create("Cookie");
 // 创建UserData实例
 storage = StorageFactory.create("UserData");
 // 创建DOMStorage实例
 storage = StorageFactory.create("DOMStorage");

由于采用了一致的IStorage接口,那么上面var storage的storage对象将具有一致的setItem、getItem、remove等方法,这样我们可以放心的调用这些方法而不需要考虑方法是否存在以及函数签名等问题。

很多朋友可能会有疑问,我们直接new不是更直接么,现在可能大家感觉设计模式比较多此一举,但是随着项目代码量的增加,设计模式在后期的维护、代码复用、功能扩展上的优势就能体现出来了,下一节我将用一个简单的例子来说明这个问题。

Posted in:
  • 前端开发与用户体验
  • Web开发及相关
Tagged
  • javascript
  • 设计模式
  • 类工厂

JavaScript本地存储(3) : DOM Storage

上回我们在 《JavaScript本地存储(2) : IE Only的userData》 中提到了userData,当然这个存储方式只能支持IE系列的浏览器,从长远来看这种方法应该是被抛弃的,目前新技术发展很快,比如最新的HTML5技术,随之而来的是更为标准的JavaScript本地存储模式,那就是DOM Storage。更多的可以参考W3C的标准化文档 《Web Storage》 ,其为我们提供了两种模式的本地存储,一个是sessionStorage,另一个是localStorage,今天我们先重点介绍localStorage。 同样的这两种存储模式都是基于标准的Storage接口的,其接口规范如下:

interface Storage {
  readonly attribute unsigned long length;
  DOMString key(in unsigned long index);
  getter any getItem(in DOMString key);
  setter creator void setItem(in DOMString key, in any value);
  deleter void removeItem(in DOMString key);
  void clear();
};

大家应该对这个非常熟悉,因为有些地方类似于我们在第一篇介绍的IStorage的接口方法,同样的基于这样的标准我们就可以很轻松的实现我们的IStorage接口了。

var DOMStorage = function() {
  this.domStorage = null;
  this.domain = location.hostname;
  if (!this.domStorage) {
    this.domStorage = window.localStorage ||
            window.globalStorage &&
            window.globalStorage[this.domain];
  }

  this.setItem = function(key, value) {
    this.domStorage.setItem(key, value);
  }
 
  this.getItem = function(key) {
    return this.domStorage.getItem(key);
  }
 
  this.remove = function(key) {
    this.domStorage.removeItem(key);
  }
}

大家可能奇怪,为什么会出现window.globalStorage这样的东东,原来localStorage只是FireFox 3.5及以上版本支持,对于低于这个版本的FireFox浏览器,我们可以用globalStorage变通一下,当然更详细的信息我们可以参考Mozilla的官方文档 《DOM Storage》 。下面只列出globalStorage的域功能,globalStorage有个域标识,相当于访问权限控制,具体如下。

  • globalStorage['developer.mozilla.org'] 在developer.mozilla.org下面所有的子域都可以通过这个存储对象来进行读和写。
  • globalStorage['mozilla.org'] 在mozilla.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
  • globalStorage['org'] 在.org域名下面的所有网页都可以通过这个存储对象来进行读和写。
  • globalStorage[''] 在任何域名下的任何网页都可以通过这个存储对象来进行读和写。

肯定会有朋友问,IE支持localStorage么,据我所知,目前也只是IE8及以上版本支持localStorage,那么低于IE8版本的可以用globalStorage?答案是否定的,globalStorage貌似只有火狐支持,那么低于IE8版本的IE浏览器就没有办法了吗?哈,你忘记了我先前介绍的userData的IE专用办法了,关键时刻还是可以请它来帮忙的。

下一篇我将重点介绍如何整合这些存储方式。哦,对了,差点忘了sessionStorage,这个好理解,存储操作方式和localStorage一样,只不过sessionStorage是浏览器对话模式的,也就是说你关了浏览器就什么都没有了。

最后给出篇参考文章: 《跨浏览器的本地存储(二):DOM:Storage》

Posted in:
  • 前端开发与用户体验
  • Web开发及相关
Tagged
  • javascript
  • 本地存储
  • htmldom

© Wang Ye / 王 晔. All rights reserved.