html实现数据存储,HTML5数据存储
相信你已经对HTML5的数据存储有过了解或者是深入的了解,但是哥还是要在此略提一下HTML4与HTML5的数据存储。
HTML4的数据存储主要有cookie存储和session存储,这两种存储都有时间和大小的限制,大多数浏览器对cookie的限制最多不能超过4096个字节(4KB),且cookie的数量总共不得超过300个,单个域或本地的cookie不得超过20个,这样的限制已经完全无法满足如今的WEB2.0站点的需求(详见MDC cookie介绍)。
HTML5的数据存储在HTML4的基础上多了3个,分别是本地数据存储、session存储、离线存储,哥这篇文章主要讲本地数据存储和session存储。离线存储在下期分享。
HTML5的localStorage和sessionStorage都是通过key-value的数据格式做数据存储的。
首先我们来看一下HTML5的本地存储与session存储的区别:
localStorage:
适用于长期限的存储,在窗口关闭后数据仍然存留且在同域下数据存留在多个页面中,也就是说使用localStorage存储数据,支持HTML5本地存储的浏览器会在用户的本地分配空间用于永久性存放指定的数据,且这些数据是在同一个域名下共享的,比如mobile.alipay.com中的本地存储的数据在mobile.alipay.com/mkt中依然可以访问到。
sessionStorage:
适用于存储短期的数据,在同域中无法共享,并且在用户关闭窗口后,数据将清除。
sessionStorage数据在同域中无法共享这一特性将在未来可能改变—-允许像本地存储一样在同域中共享。
除了以上提到的这些不同点以外,HTML5的localStorage和sessionStorage表现的几乎一样。
这两种数据在用户浏览期间不能够像cookie一样传送到服务器,如果你需要把数据发送服务器,你必须要使用XMLHttpRequest对象做异步传输。
请注意这个潜在的数据存储池在localStorage和sessionStorage之间并不能共享,因此你可能会从sessionStorage对象中读取localStorage对象中的数据,甚至遭受到恶意攻击,所以为避免混淆、数据错乱,你应该在这两个存储对象中使用不同的Key,这一点非常重要!!!
下面我们来看看如何使用这两个存储对象,在此说明这两个存储对象的方法是一样的,所以哥在此使用sessionStorage做范例演示,你也可以把sessionStorage修改为localStorage。
更为具体详细的使用方法请参考W3C WEBSTORAGE(你应该阅读)
存储数据
记住HTML5的数据存储对象都是以key-value形式存储数据的!存储数据可使用setItem方法,这个方法带有两个参数,第一个参数是数据key,第二个参数是数据value,比如我需要存储用户的手机的userAget,代码应该像这样:
var ua = navigator.userAgent;
sessionStorage.setItem('ua',ua);
如果存储的数据已经达到浏览器指定的限额,你的代码应该抛出一个异常,或者用户禁用了浏览器的数据存储,
var ua = navigator.userAgent;
try{
sessionStorage.setItem('ua',ua);
}catch(e){
if(e === QUOTA_EXCEEDED_ERR){
alert('无法存储数据,数据量超限');
}
}
获取数据
获取数据非常简单,你可用使用getItem方法,传递给它一个指定的key参数,像这样:
var ua = sessionStorage.getItem('ua');
var len = sessionStorage.length;//获取当前存储的数据数量
删除数据
删除数据同样很简单,你可用使用removeItem方法和clear方法,传递给removeItem一个指定的key参数,像这样:
sessionStorage.removeItem('ua');
如果你想删除所有存储的数据,可以像这样:
sessionStorage.clear();
触发存储事件
像cookie一样存储对象是一个共享的资源作用在同域下,所有同域下的页面共享一个本地存储的数据,框架和内联框架也共享相同的本地数据,因为他们都是同域的,都是来源于一个共同的窗口。
因为这些数据源在同域下是共享的,javascript脚本运行在多个页面中的上下文中,在其中一个页面的上下文中修改本地存储的数据可能会影响到其它页面中的数据,在数据被修改后,你的脚本应该做出改变或者通知,否则可能会有意想不到的结果,这种现象仅会出现在localStorage对象中。
你应该在同域下的页面中注册storage事件,代码如下:
window.addEventListener('storage',fnStorageHandle,false);
一旦你的页面有注册storage事件,当你同域下的任何一个页面中出现本地数据被修改,那么这个事件将会触发,在这里这个事件叫做fnStorageHandle。
function fnStorageHandle(e){
alert(e.key);//key的名称
alert(e.oldValue);//数据修改前的值
alert(e.newValue);//新的数据值
alert(e.url);//数据在何处被修改,也就是触发修改数据脚本所有的页面地址
alert(e.storageArea);//数据存储对象
}
如果你要测试storage事件,可以将storage事件放置你的本地服务器同域下不同的页面中做测试,另外HTML5存储事件的兼容性,请看PPK的一篇文章。
html实现数据存储,HTML5数据存储相关推荐
- html5 本地批量存储,HTML5本地存储
什么是HTML5存储? 简单地说,它是一种让web页面在浏览器端本地化存储键值对的方式.跟cookies一样,即使你从网站导航到别的网站,关掉了浏览器的tab页,退出了浏览器,数据依然存在:与cook ...
- HTML5 本地存储和内容按需加载的思路和方法
HTML5 本地存储和内容按需加载的思路和方法 作者:佚名 字体:[增加 减小] 来源:互联网 时间:04-07 16:05:09 我要评论 本文将着重介绍HTML5本地存储和内容按需加载的思路和方法 ...
- HTML5的数据存储和数据处理的功能有,浅析 HTML5 数据存储的方法及应用
原标题:浅析 HTML5 数据存储的方法及应用 1 HTML5 本地存储简介 中新增的功能之一是本地,使用本地数据 库可以在客户端本地建立一个数据库,该数据库以前是必须要 保存在服务器端数据库中的内容 ...
- 如何为某些HTML标记存储任意数据
本文翻译自:How to store arbitrary data for some HTML tags I'm making a page which has some interaction pr ...
- 在Web应用中使用localforage存储离线数据
在现代Web应用中,我们经常会需要在本地存储一些数据,一方面记住用户的一些状态,或个性化设置,尤其是可以缓存一些常用(甚至全部)的数据,实现更加强大和丰富的本地交互体验. 传统上说,我们有多种办法来存 ...
- MySQL还是h5储存数据_h5中五大存储方式
h5之前,存储主要是用cookies.cookies缺点有在请求头上带着数据,大小是4k之内.主Domain污染. 主要应用:购物车.客户登录 对于IE浏览器有UserData,大小是64k,只有IE ...
- [js] localStorage 如何存储JSON数据并读取JSON数据
localStorage是HTML5提供的再客户端实现本地存储的一种方法,但是localStorage方法只能存储字符串数据,有时候我们需要存储对象到本地比如:JSON:那么,localStorage ...
- Android数据持久化:文件存储
数据持久化: 数据可分为瞬时数据和关键数据.保存在内存之中的数据是瞬时数据,而对于一些关键性数据,后期需要持续使用的,应当保存在存储设备中: 持久化保存方式: 文件存储.SharePreference ...
- android 读取内部存储文件格式,Android中的数据储存之文件存储
当我们在使用各种程序时,其实际上是在和各种数据打交道,当我们聊QQ,刷微博,看新闻,其实都是在和里面的数据交互 例如在聊天时发出的消息,以及在登录时输入的账号密码,其实都是瞬时数据,那什么是瞬时数据呢 ...
最新文章
- python输出到语音播放_用Python写一个语音播放软件
- Shell:字符串操作
- hitTest:withEvent:方法流程
- 趁热打铁-一次.Net WebService的性能优化之旅
- boost::spirit模块实现使用不同的输出语法格式化单个容器类型的测试程序
- 深度学习——02、深度学习入门 1-7
- 一个Camel Multicast组件聚合策略问题的解决过程
- [转载] Python 字典(Dictionary) get()方法
- 难于传播的正能量,来点干货
- JAVA四行代码制作简单的翻译软件(傻瓜式教程)
- Eclipse Android开发环境搭建
- 外贸企业管理系统解决方案丨汇信
- 64位Win7 服务器运行失败
- 概率论————思维导图(上岸必备)(多维随机变量及其分布)
- VsCode 何时能一统江湖?
- Spring IOC AOP详细笔记
- PyQt5 第二章 窗口布局管理(二)
- PHP调用全国天气预报数据接口查询天气
- UML 构件图(组件图)
- EOS智能合约开发与交互