在如今的 web 开发中, html5 是大家讨论的最大一个话题. HTML5 提供的新功能特征使得 Web 程序员如虎添翼, 并免去了以往钻研各种方法来让网站更好, 更快, 更灵活的气力. 这些新功能中有一个非常让我感兴趣, 它就是 Web 存储 (Web Storage) http://dev.w3.org/html5/webstorage/ .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/post/web-storage.html