您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > HTML5&CSS3

HTML5 Web存储(Web Storage)技术及用法

作者:歪脖骇客  来源:webhek  日期:2014-05-22 7:46:55
收藏  评论:( 0 )  阅读:421

       在如今的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/



除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/html5/957.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论