HTML5WebStorageAPI与.NET会话机制探索

黄有福

摘要：HTML5 WebStorage API 能很方便地在Web请求之间持久化数据，开发者可以将需要跨请求重复访问的数据直接存储在客户端的浏览器中，还可以在关闭浏览器很久后再次打开时恢复数据，以减小网络流量。通过比较.NET的会话机制与HTML5 WebStorage API，探索两者在Web客户端的应用。

关键词：WebStorage；离线缓存；会话；Session

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2013）09-2102-03

HTML5近十年来发展迅猛，在HTML 5平台上，视频，音频，图像，动画，以及同电脑的交互都被标准化。HTML5功能越来越丰富，支持图片上传拖拽、支持localstorage、支持web SQL database、支持文件存储API等等。在PC的WEB开发过程中，.NET的会话机制在各方面都表现很好，然而在基于智能移动终端的开发过程中， HTML5的Web localStorage有着极大的优势，下面主要从HTML5 WebStorage API的基本原理和操作方法入手，比较.NET的对话机制，以手机招生信息网的用户缓存进行分析，如何使用用户服务更省流量，更快捷地访问页面。

1 HTML5 WebStorage API概述

在HTML5之前，各种浏览器都能很好的支持Cookie，因为可以直接使用JS就可以调用，使用很方便。但是Cookie本身就不是很完善，主要表现在二个方面：一是存储大小受限，一个Cookie大小大概在4KB左右，又有访问时间的限制，这就不能接受你文件或邮件那样的大文件了，因此用户在使用的过程中就很大的不便。二是安全的问题，因为用户请求页面的时候，Cookie就要在服务器和浏览器之间来回传送，Cookie都会被附加在每个HTTP请求的Header中，增加用户流量，况且传递的过程中是使用明文，用户的信息容易受到跨站的脚本攻击，如果没有对信息加密，只需要在链接地址后面加上“？cookie=document. Cookie”便可以获取用户的Cookie信息，用户数据就存很大的威胁。

HTML5的 Web Storage（也称为DOMStorage） API的出现能很好的解决这个问题，Web Storage API 是用JavaScript来保存对象，在页面中加载时读取和保存数据都比较容易，开发者可以为应用创建本地存储，由于存储的数据不在网络上传输，重新启动浏览器时更加容易获取，而且可以保存5M左右的数据，又能长期保存。这样极大的便解决了之前只能用Cookie来存储数据的容量小、存取不便、容易被清除的问题，这个功能为客户端提供了极大的灵活性，并能快速地读取到数据，减少了用户等待和数据流量。

2 HTML5 WebStorage API的使用

2.1 检查浏览器的支持性

目前有部分浏览器不能支持HTML5，因些在使用之前，需要检查浏览器是否支持Web Storage API ，去检查window. LocalStorage或window.SessionStorage是否存在，实际操作过程中，使用如下程序可以检查浏览器是否支持Web Storage。

通过测试，目前主流浏览器都支持Web Storage，基本支持HTML5的都能很好的支持，浏览器支持情况如表1所示。

2.2 LocalStorage与Session Storage的区别

HTML5 WebStorage API 能支持离线缓存，主要是提供了两种存储类型API接口：sessionStorage和localStorage。其中localStorage 作为HTML5本地存储WebStorage特性的API之一，主要作用时将数据保存在客户端中，在安全性方面，localStorage是域内安全的，即localStorage是基于域的，任何在该域内的所有页面，都可以访问localStorage数据。 而sessionStorage主要是将数据保存到会话中， 它的存储的生命周期只保存在存储它的当前窗口或由当前窗口新建的新窗口，直到相关联的标签页。sessionStorage的生命周期在会话期间内有效，而localStorage就存储在本地，并且数据是永久的，除非用户或程序对其执行删除操作。

2.3 HTML5 WebStorage API数据的获取

在HTML5中，可以定义Web Storage的API，通过Window对象来获取他们，程序如下：

从规范定义的接口来看，接口数量并不多，只有length是属性，其余都是方法。其中setItem和getItem互为以对get/set。removeItem方法的主要作用是删除一个键值对。clear的作用是删除所有的键值对。

3 .NET对应的会话机制

在HTML5开发过程中，我们经常会遇到这样的问题，当信息系统中需要禁止重复登陆的功能，通常做法是在数据库中建一个记录当前使用人员的表，在用户身份验证完成后对照该表，如果用户存在在这个表中，按具体需求可以实现禁止当前用户登陆，或强制先前用户注销。如果用户不存在在这个表中，将用户信息保存到该表，在用户退出，或者session结束时清除表中数据。但是，我们经常会遇到这样的问题：如果采用禁止当前用户登陆的方法，当用户出现意外关闭，用户如何删除掉已登录的记录，如果不删除，下次该用户就无法登录了。在.net的会话机制中，为了减少这个问题的发生，常常使用所提供的三种会话状态存储机制。一种进程内模式（问题模式），会话状态存储在进程内；两种进程外模式：状态机模式，会话状态村处于网络状态服务器；sql server模式，会话状态存储于sql server中。

4 HTML5 WebStorage API构建与.NET对应的会话机制

4.1 .net的session会话机制

当我们的HTML5客户端应用程序要与.Net的后台程序对接上的时候，就要构建与之对应的会话机制，这样才能达成一致的操作。下面以做一个测试，在项目中使用Visual stdio创建两个.aspx页面，其中一个为NO1.aspx，另一个为NO2.aspx，在设计过程中使用同一个Session，用session[“Name”]表示。测试结果如下在One页面保存Session["Name"]的值为hyfu，如图1所示， Two页面中显示也是hyfu，结果如图2所示：

从上面的运行结果可以看出，在.net的session会话机制中，它是由服务器端创建的，并且在客户访问时会把session信息放到http头中发送出去的，在服务端由于已经保存了session的相关信息，所以在下一次访问时，session的值会传送到客户端，保存用户信息。

4.2 WebStorage处理会话机制

在离线系统的设计中，我们经常采用localStorage处理机制，因为它的数据的生命周期比窗口或浏览器的生命周期长，在页面中一般的JS对象或数据的生存期是仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了。而WebStorage 只要同源的同窗口（或tab）中，刷新页面或进入同源的不同页面，数据始终存在。也就是说只要这个浏览器窗口没有关闭，加载新页面或重新加载，数据仍然存在，所以在页面设计中，我们采用localStorage记录会话机制，例如使用：window.localStorage.setItem（"sessionMechanism"， username）； 实现记录用户登录信息，使用storage事件监听会话的变化。例如使用window.addEventListener（"storage"， checkStorageEvent， true）；语句，则在表单页面设置事件的监听。下面我们以手机招生信息网为例进行分析，首先我们设计一个用户登录页面，在页面中写入“window.localStorage.setItem（"sessionusename"， username）；”保存用户信息，我们在程序中设置localStorage监听事件，如当输入用户信息时，运行结果如图3所示，当输入正确的信息，点击登录则进入用户详细信息页面，效果如图4所示。

当用户在当面窗口重新输入别的用户名和密码时，系统会弹出提示信息，并跳转到登录的界面，这样就保证了一个同源浏览器只有一个用户在执行操作。

5 结束语

参考文献：

[1] 张亚飞.Android、iPhone、Windows Phone手机网页及网站设计[M].北京：清华大学出版社，2011.

[2] 郭少豪.创意之钥——Android手机交互应用开发[M]. 北京：中国铁道出版社，2011.

[3] 陶国荣.HTML5实践[M]. 北京：机械工业出版社，2012.

[4] Peter Lubbers，Brian Alian. HTML5程序设计[M]. 柳靖，李杰，刘淼，译. 2版.北京：人民邮电出版社， 2012.