现在,HTML5BOM允许在客户端实现较大规模的数据存储,用户可以使用web存储,也可以使用web sql数据库,这两项新增功能为浏览器成为应用程序开发平台奠定了坚持的数据操作基础。
Web存储机制是一中通过字符串形式的key/value对来安全的存储和使用数据的方法,其目标是提供一个更全面的,可以创建交互式Web应用程序的方法。
一、web存储和cookie的对比:
1)首先是容量不同,web存储的存储量更大,更安全,更易于使用,而Cookie的存储量是有限制的。
2)存储的持久性不同,web存储是通过浏览器来永久存储和李大小的数据的方法
二、本地存储和会话存储
在客户端存储数据的类型有两种:
1)localStorage : 本地存储,没有时间限制的数据存储
2)sessionStorage : 会话存储,针对一个会话期的数据存储
下面就写一个简单的例子,在客户端持久存储数据
var strDomain = "127.0.0.1"; //定义当前域
try{
/**
*因为较早版本的FireFox没有实现localStorage,但他提供了globalStorage属性用于指定域创建本地存储区域,其中也可以指定这个域为当前域,因此
* ,下面这句代码可以用来实现localStorage在各浏览器间的兼容
**/
var oStorage = window.localStorage ? window.localStorage : window.globalStorage[strDomain]; //h获取存储区域
//查看vistorCount是否存在
//如果存在就读取并加1,增加一次访问统计
//如果不存在就意味着第一次访问,将其初始化为1
if(oStorage.visitorCount){
oStorage.visitorCount = parseInt(oStorage.visitorCount,10) + 1;
} else {
oStorage.visitorCount = 1;
}
document.write("欢迎第" + oStorage.visitorCount + "次访问"); //写出访问统计数据
} catch(err) {
alert(err.message ? err.message : err.toString());
}
结果显示如下:
同时我们使用开发人员工具(我使用的是Chrome浏览器)可以清晰的看到在客户端存储的数据。
在会话期存储数据
SessionStorage针对一个Session进行数据存储,当用户关闭浏览器窗口后,数据会被删除。
下面的代码用于创建一个提交表单:
<body>
<form action="anotherPage.jsp" method="get">
<input name="myName" id="myName" type="text" onblur="oStorage.myName.value=this.value">
<input name="mySubmit" type="submit"/>
</form>
<script>
try{
var oField = document.getElementById(myName);
oStorage = window.sessionStorage;
//查看是否存在myNameValue键
if(oStorage.myNameValue){
oField.value = oStorage.myNameValue;
}
}catch(err){
alert(err.message ? err.message : err.toString());
}
</script>
</body>
结果显示,同样我们使用开发人员工具可以清晰的看到存储状况:
- 大小: 56.1 KB
- 大小: 31.7 KB
分享到:
相关推荐
网络存储一个允许使用 HTML 5 本地存储和会话存储 API 的 elm 库。 相关: :
1. localStorage是本地存储,存储期限不限; 2. sessionStorage会话存储,页面关闭数据就会丢失。 使用方法: localStorage.setItem(“key”,“value”)//存储 localStorage.getItem(key)//按key进行取值 ...
一个简单易用的 AngularJS 的 HTML5 本地和会话存储系统 基本有用的功能列表: 为 AngularJS 应用程序创建基于会话(选项卡/窗口)的存储和闪存存储 为存储的信息添加过期时间 自动检查存储的信息是否是对象/json ...
使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 页面参考如下图,能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 localStorage(本地存储),可以长期存储数据,...
通过两个指令将 html 形式的数据与本地或会话存储链接起来。 也可以用一个存储绑定多个表单。 vsHandyStorage 使用 ngStorage 模块作为依赖。 安装 bower install vs-handy-storage 用法 | 将 vsHandyStorage.js ...
在客户端运行的JS是不能操作用户电脑磁盘中的文件的(保护客户端运行的安全) 1、JS中的本地存储: 使用JS向浏览器的某一个...sessionStorage:信息的会话存储,会话窗口存在信息也存在,会话窗口关闭信息就消失了 2、C
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁 因此...
对于简单的键值对(比如应用程序设置)或简单对象(如应用程序状态)进行存储,使用本地和会话存储能够很好地完成,但是对繁琐的关系数据进行处理的时候,它就力所不及了,而这正是HTML5的“WebSQLDatabase”API借口...
键名是您的设置的名称,例如,全名GetValue(keyName) -根据您选择的存储类型,它将根据提供的键名(例如全名)从本地存储或Web存储中检索值。 GetKeys() -它将返回Web存储中的所有密钥名称。 不返回任何值。 ...
HTML新增的本地存储解决方案之一 LocalStorage 本地永久性存储数据,除非显式将其删除或清空 SessionStorage 存储的数据只在会话期间有效,关闭浏览器则自动删除 Sqlite 一款轻型的数据库,是遵守ACID的关系型...
应用程序安全专家表示,HTML5给开发人员... 客户端存储 早期版本的HTML仅允许网站将cookies作为本地信息存储,而这些空间相对较小,仅适用于存储简单的档案信息或者作为存储在其他位置的数据(例如会话ID)的标识符,Den
该网站使用浏览器中的本地存储,因此信息将在浏览器中从一个会话到下一个会话持续存在。 下图显示了Daybook的标准视图,其中输入了多个事件。 项目目的 该应用程序演示了用于创建事件计划应用程序的几种技术。 该...
标签会话是使用HTML5的本地存储功能存储的,因此它们不会被删除,并且对于每个浏览器都是特定的。 未来版本的想法:-通过Google帐户同步会话-美化选项卡会话管理器+允许会话重新排序-自动会话跟踪 支持语言:English
角度存储Cookie,会话和本地存储的装饰器和服务该库添加了装饰器,使使用HTML5的localStorage和sessionStorage自动保存和恢复变量变得非常容易。 它还提供了Angular-Injectable Session-和LocalStorageService。包括...
会话和本地存储类型均受支持。 安装 Install-Package BlazorBrowserStorage -Version 1.0.0 用您的服务方法注册服务 services.AddBlazorBrowserStorage(); 没有javascript库引用依赖项 该库是从移植和改进的,但...