Web应用的发展,使得客户端存储使用得也越来越多,而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie,但是作为真正的客户端存储,Cookie则存在很多致命伤。此外,在IE6及以上版本中还可以使用userData Behavior、在Firefox下可以使用globalStorage、在有Flash插件的环境中可以使用Flash Local Storage,但是这几种方式都存在兼容性方面的局限性,因此真正使用起来并不理想。针对以上情况,HTML5中给出了更加理想的解决方案:假如你需要存储复杂的数据则可以使用Web Database,可以像客户端程序一样使用SQL(不过Web Database标准当前正陷于僵局之中,而且目前已经实现的浏览器很有限);假如你需要存储的只是简单的用key/value对即可解决的数据则可以使用Web Storage。 本文主要从各个方面介绍一下Web Storage的具体情况。
sessionStorage与localStorage
Web Storage实际上由两部分组成:sessionStorage与localStorage。
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
为什么选择Web Storage而不是Cookie?
与Cookie相比,Web Storage存在不少的优势,概括为以下几点:
1. 存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。
2. 存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。
3. 更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,使得数据操作更为简便。
4. 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。
兼容性如何?
接下来的各种测试是在以下浏览器中进行的:IE8、Firefox3.6、Chrome5、Safari4、Opera10,事实证明各个浏览器在API方面的实现基本上一致,存在一定的兼容性问题,但不影响正常的使用。
sessionStorage测试
本节主要针对sessionStorage的一些特性进行了测试,测试的重点在于各个浏览器对于session的定义以及跨域情况。测试方法很简单:打开页面A,在页面A中写入当前的session数据,然后通过页面A中的链接或按钮使用不同的方式进入下页面B,如果页面B中能够访问到页面A中的数据则说明浏览器将当前情况的页面A、B视为同一个session。
从表1中可以看出,处于安全性考虑所有浏览器下session数据都是不允许跨域访问的,包括跨子域也是不允许的。其他方面主流浏览器中的实现较为一致。
<h1>Web Storage</h1>
<table>
<tr>
<td>姓名</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>留言</td>
<td><input type="text" name="memo" id="memo" /></td>
</tr>
<tr>
<td>连接地址</td>
<td><input type="text" name="url" id="url" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="保存" onClick="saveData()" />
</td>
</tr>
</table>
<div class="sdsd">
<div id="datatable" border="1"></div>
</div>
<script>
var datatable = null;
var db = openDatabase('MyData', '', 'My Database', 102400);//使用openDatabase方法来创建一个访问数据库的对象
function init()
{
datatable = document.getElementById("datatable");
showAllData();
}
function removeAllData()
{
for (var i =datatable.childNodes.length-1; i>=0; i--)
{
datatable.removeChild(datatable.childNodes[i]);
}
var tr = document.createElement('tr');
var th1 = document.createElement('th');
var th2 = document.createElement('th');
var th3 = document.createElement('th');
var th4 = document.createElement('th');
th1.innerHTML = '姓名';
th2.innerHTML = '留言';
th3.innerHTML = '连接地址';
th4.innerHTML = '时间';
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
tr.appendChild(th4);
datatable.appendChild(tr);
}
function showData(row)
{
var tr = document.createElement('p');
tr.setAttribute('class','lmq_p');
var td1 = document.createElement('li');
var a1=document.createElement('a');
var urla=document.getElementById('url').value;
a1.setAttribute('href','http://'+urla);
var td11=td1.appendChild(a1);
td11.innerHTML = row.name;
var td2 = document.createElement('li');
td2.innerHTML = row.message;
var td3 = document.createElement('li');
var td4 = document.createElement('li');
var t = new Date();
t.setTime(row.time);
td3.innerHTML=t.getMonth()+"月"+t.getDate()+"日"+"星期"+""+t.toLocaleTimeString();
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
datatable.appendChild(tr);
}
function showAllData()
{
db.transaction(function(tx)
{
tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, url TEXT, time INTEGER)',[]);
tx.executeSql('SELECT * FROM MsgData', [], function(tx, rs)
{
removeAllData();
for(var i = 0; i < rs.rows.length; i++)
{
showData(rs.rows.item(i));
}
});
});
}
function addData(name, message,url, time)
{
db.transaction(function(tx)
{
tx.executeSql('INSERT INTO MsgData VALUES(?, ?, ?,?)',[name, message, url,time],function(tx, rs)
{
alert("成功保存数据!");
},
function(tx, error)
{
alert(error.source + "::" + error.message);
});
});
}
function saveData()
{
var name = document.getElementById('name').value;
var memo = document.getElementById('memo').value;
var url = document.getElementById('url').value;
var time = new Date().getTime();
addData(name,memo,url,time);
showAllData();
}
</script>
觉得不错,点个顶,支持原创!
分享到:
相关推荐
NULL 博文链接:https://yuruei2000.iteye.com/blog/1489088
软件名称:华硕网络存储:WebStorage APK名称:com.ecareme.asuswebstorage 最新版本:2.1.28.8207 支持ROM:2.2及更高版本 界面语言:简体中文 软件大小:10.23 M 软件简介: 全球超过三千万个注册用户;Google ...
直接使用 W3C WebStorage API 的任何实现作为 React/Flux 风格的存储。 var WebStorage = require ( 'react-webstorage' ) , dispatcher = require ( './path/to/app-dispatcher' ) ; var webStorage = new Web...
ngx-webstorage 本地和会话存储-Angular服务 该库提供了易于使用的服务,可通过Angular应用程序管理Web存储(本地和会话)。 它还提供了两个装饰器来同步组件属性和Web存储。 指数: : : 从v2.x迁移到v3 将您的...
html web storage 别人写的,共享下
Web Storage.rar
您可以跨任何后端(例如内存数据库、本地文件系统、mongodb、redis 等)集成或重用 webstorage 接口。 默认情况下,webstorage 不持久化数据。 这意味着它将使用内存对象作为其后端。 var webstorage = require ...
网络存储本地 一个持久性插件为本地文件存储。... var webstorage = require ( 'webstorage' ) ; var local = require ( 'webstorage-local' ) ; webstorage ( local ( '/tmp' ) ) ; 执照 麻省理工学院
利用web Storage实现大数据的在线存储
cloudstorage_web_参考
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁 因此...
还在烦恼JS前端,或者移动端缓存使用什么来储存吗。可以使用web-storage-cache.js,进行数据缓存。
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB,感兴趣的朋友可以了解下
主要为大家详细介绍了HTML5本地存储之Web Storage的相关资料,Web Storage如何用JSON存储多个数据,感兴趣的小伙伴们可以参考一下
Storage and Buffer Manager实现文档
主要介绍了详解H5本地储存Web Storage的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
h5webstorage 适用于Angular2HTML5 WebStorage API (服务) (服务) (装饰器) (功能) 用 下载库: npm install h5webstorage --save 2.将模块和提供程序导入顶级模块: import { WebStorageModule } ...
本文为大家分享了微信小程序实现留言板的具体实现方法,供大家参考,具体内容如下 先说一下小程序的开发环境之类的基础东西 1.到微信公众平台下载开发者工具。安装 2.appID与没有appID的区别是,appID可以用真机预览...