HTML5 Web存储(Web Storage)技术及用法
在如今的Web开发中,HTML5是大家讨论的最大一个话题。HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好、更快、更灵活的气力。这些新功能中有一个非常让我感兴趣,它就是Web存储(Web Storage)。Web存储(Web Storage)提供了一个在浏览器端保存用户会话信息的方法。下面让我们来看一看Web存储(Web Storage)的基本用法!
Web存储(Web Storage)基本要领
- 存储的数据可以是任何类JSON的结构化数据。
- 存储的数据不会随着用户浏览时会话过期而过期,但会应用户的请求而删除。浏览器也因为存储空间的限制或安全原因删除它们。
- 存储的信息在整个域名下都可以使用。
Web存储(Web Storage)里的方法
- setItem(key,value): 往
sessionStorage
对象里增加一个key/value数据。 - getItem(key): 根据key获取值。
- clear(): 清空
sessionStorage
对象。 - removeItem(key): 从
sessionStorage
对象里删除一个数据。 - key(n): 获取key[n]的值。
设置Key/Value值
有两种方法都能将信息放入sessionStorage
中:
sessionStorage.setItem('someKey','someValue');
…你也可以用更简洁的方法:
sessionStorage.someKey = 'someValue';
获取一个值:
也有两种方法可以获取一个值:
sessionStorage.getItem('someKey'); //returns 'someValue'
…或者简单的引用sessionStorage
:
sessionStorage.someKey; //returns 'someValue'
删除一个Key/Value
sessionStorage.removeItem('someKey'); //returns 'undefined' for someKey
所有你需要做的是将key值提供给removeItem
方法。
清空数据
sessionStorage.clear(); //什么都没了
只需要简单的调用clear()方法,什么都没了。
Web存储(Web Storage)使用的一个简单例子
<a href="javascript:;" onClick="if(sessionStorage && sessionStorage.getItem('name')) { alert('赶快回来哦, ' + sessionStorage.getItem('name')); }">注销</a>
当用户点击注销链接,页面会谈到对话框说“赶快回来哦,xxx”!
HTML5 Web存储(Web Storage)的浏览器支持情况
所有很酷的功能特征的出现最关键的就是浏览器的支持情况,幸运的是,所有的现代浏览器都支持HTML5 Web存储(Web Storage),从IE8开始也支持它。如果你要支持IE6、IE7,那就自己想办法吧。
HTML5 Web存储(Web Storage)非常简单但也非常有用。因为HTML5 Web存储(Web Storage)需要使用JavaScript进行操作,所以,在使用它执行一些关键功能时要确保浏览器支持这个特征并开启了JavaScrpt脚本功能。
你觉得HTML5 Web存储(Web Storage)有用吗?在你的应用里已经使用它们了吗?
转自 http://www.webhek.com/web-storage/
HTML5 Web存储(Web Storage)技术及用法的更多相关文章
- Web存储(Web Storage)的浏览器支持情况
所有很酷的功能特征的出现最关键的就是浏览器的支持情况,幸运的是,所有的现代浏览器都支持HTML5 Web存储(Web Storage),从IE8开始也支持它.HTML5 Web存储(Web Stora ...
- HTML5 本地存储Web Storage简单了解
HTML5本地存储规范,定义了两个重要的API :Web Storage 和 本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...
- HTML5本地存储——Web SQL Database与indexedDB
虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...
- Web存储(Web Storage)介绍
Web存储即在客户端存储数据. 在没有Web Storage之前,是通过cookie来在客户端存储数据的.但是由于 浏览器能存cookie数比较少.如IE8,Firefox,opera每个域可以保存的 ...
- HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- [转]HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- HTML5——web存储 Web SQL 数据库 应用程序缓存 Web Workers 服务器发送事件 WebSocket
web存储 比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...
- HTML5本地存储(Local Storage) 的前世今生
长久以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势.对于桌面应用(或者原生应用),操作系统一般都提供了一个抽象层用来帮助应用程序保存其本地数据 例如(用户配置信息或者运行时状态等). 常 ...
- HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
随机推荐
- 在 Canvas 中绘制扇形
在 HTML5 Canvas 中,我们可以通过 arc 方法来绘制圆形: // context.arc(x, y, r, sAngle, eAngle, counterclockwise); var ...
- Nightmare(DFS)
Nightmare hdu1072 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- 利用树莓派跑python爬虫的简单教程——从无到有
因为学校项目的原因入手了树莓派,到手先折腾了两天,发现网上的教程大都是拿他搭建服务器,mail,或者媒体服务器之类,对于在学校限时的宽带来说有点不太现实,不过低功耗适合一直开着的确启发了我.所以想到拿 ...
- firefox因gnash cpu 高
sudo apt-get remove --purge gnash 去adobe下载adobe flash for linux 解压 tar zxvf install_flash_player_11_ ...
- Code First 创建数据库
最近在对以前学的知识做一个总结,EF 这块,Code First 是很重要的一部分,方便快捷创建模型. Code First有两种配置方式: DataAnnatation: [Table(&quo ...
- poj 1699 Best Sequence
http://poj.org/problem?id=1699 题意:给你n个长度为L的序列,求包含这几个序列的最短长度. 先预处理每两个序列之间的关系,然后dfs枚举就行. #include < ...
- StreamReader与StreamWriter
StreamReader实现了抽象基类TextReader类,而StreamWriter实现了抽象基类TextWriter.分别用于对流的读取与写入. 先从StreamReader说起 一.构造方法 ...
- C# 根据URL返回HTML_根据URL获取图片信息/缩略图
/// <summary> /// 根据URL 返回HTML /// </summary> private List<string> GetHtmlByUrl(st ...
- perl 创建文本框
my $mw = MainWindow->new(-title => "Mem monitor"); $frm_name1 = $mw -> Frame()-&g ...
- 【转】如何查看linux版本 如何查看LINUX是多少位
原文网址:http://sopace.blog.51cto.com/1227753/670526 如何得知自己正在使用的linux是什么版本呢,下面的几种方法将给你带来答案! 1. 查看内核版本命令: ...