HTML5 Web Storage 特性

简介: 原文地址: Using HTML5 Web Storage  原文日期: 2010年06月28日 翻译日期: 2013年08月12日 当下Web开发领域最火爆的词语当属 HTML5。HTML5标准的新特性将得到那些不想通过东拼西凑一些功能来使得网站更快,更好,更灵活的WEB开发者热烈的欢迎。

原文地址: Using HTML5 Web Storage 

原文日期: 2010年06月28日
翻译日期: 2013年08月12日

当下Web开发领域最火爆的词语当属 HTML5。HTML5标准的新特性将得到那些不想通过东拼西凑一些功能来使得网站更快,更好,更灵活的WEB开发者热烈的欢迎。其中一个耀眼的特性是Web Storage(Web 存储)。Web存储提供一个客户端方法来保存会话信息,让我们来看看如何使用Web Storage:

Web Storage的特点
 - 值可以是任意的数据类型,只要是key-value形式可以保存的。
 - 数据将永不过期,除非用户明确调用了delete方法,或者浏览器限制了空间大小,或者其他原因(比如用户清空历史数据)
 - 数据项在整个domain(域名)内都可见。

HTML5 Web 存储方法列表
setItem(key,value): 添加一个键值对,存储到sessionStorage(会话存储)对象
getItem(key): 根据key获取值
clear(): 清空sessionStorage(会话存储)的所有键/值对
removeItem(key): 从sessionStorage 移除某个项(键值对)
key(n): 获取第n个key。


设置key/value
有两种方式可以把值存储到sessionStorage:

// 第一种方式,标准方法
sessionStorage.setItem('email','renfufei@qq.com');
// 第二种方式,直接当成普通对象属性赋值。
sessionStorage.blog = 'http://blog.csdn.net/renfufei';

获取值

同样有两种方式:
// 1. 标准方法
var email = sessionStorage.getItem('email');
// 2. 直接取属性值
var blog = sessionStorage.blog;

移除key/value

// 移除之后,再获取值,将会得到 undefined
// 根据key,移除键值对
sessionStorage.removeItem('email');

清空sessionStorage

// 全部清除
sessionStorage.clear();

非常简单的一个示例
当用户点击退出按钮时,提示"欢迎下次再来!"

<a href="javascript:;" onClick="if(sessionStorage && sessionStorage.getItem('name')) { alert('欢迎下次再来, ' + sessionStorage.getItem('name')); }">退出</a>

浏览器兼容性
就像其他酷炫的特性一样,浏览器兼容性总是焦点。 IE8以前的浏览器都不支持sessionStorage,如果想要支持更早的浏览器,你需要自己构建sessionStorage类(对象).
HTML5 web存储简单而有趣,但是 HTML5 Web Storage需要JavaScript的支持,所以在某些关键领域(场合),你可能需要审慎地使用。
你如何看待HTML5 的 Web Storage,你在开发中用到过么?

完整的代码示例如下:

<!DOCTYPE html>
<html>
 <head>
  <title>HTML5 Web Storage 示例</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="renfufei@qq.com">
  <meta name="Keywords" content="HTML5 sessionStorage">
  <meta name="Description" content="from:http://davidwalsh.name/html5-storage">
  <!-- HTML5 建议,script 标签,不加type属性域 -->
  <script>
	// 封装为自己的方法,有一个好处,就是如果想支持更古老的浏览器,
	// 那么,可以判断是否支持HTML5,也采用自己的实现,比如cookie
	// 根据key获取值,可以指定默认值
	function get(key,defValue){
		return sessionStorage.getItem(key) || defValue;
		//return sessionStorage[key] || defValue;
	};
	// 设置key/value
	function set(key,value){
		return sessionStorage.setItem(key,value);
		//return sessionStorage[key] = value;
	};
	// 设置key/value
	function clearStorage(){
		return sessionStorage.clear();
	};
	// 退出
	function signout(){
		var name = get("name",'游客');
		if(name) { 
			alert('再见, ' +name ); 
		}
	};
	// 设置值
	function setName(){
		var nameInput = document.getElementById("name");
		if(nameInput){
			var name = nameInput.value;
			if(!name){
				alert("姓名不能为空");
			} else {
				set('name',name);
			}
		}
	};
	// 绑定事件
	 window.addEventListener("DOMContentLoaded", function() {  
        var btnsetname = document.getElementById("btnsetname");  
        var btnclear = document.getElementById("btnclear");  
        var btnsignout = document.getElementById("btnsignout");  
        btnsetname.addEventListener("click",function(){  
            //  
            setName(); 
        });   
		btnclear.addEventListener("click",function(){  
            //  
            clearStorage();
        });   
		btnsignout.addEventListener("click",function(){  
            //  
            signout();
        });  
    }, false);  
  </script>
 </head>

 <body>
  <div>
	姓名: <input id="name" value="" /> <button id="btnsetname">确定</button>
  </div>
  <div>
	<button id="btnclear">清除数据</button>
  </div>
  <div>
	<button id="btnsignout">退出</button>
  </div>
 </body>
</html>


目录
相关文章
|
23天前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
36 4
|
1月前
|
SQL 安全 PHP
PHP 自发布以来一直在 Web 开发领域占据重要地位,PHP 8 更是带来了属性、刚性类型等新特性。
【10月更文挑战第1天】PHP 自问世以来,凭借其易用性和灵活性,在 Web 开发领域迅速崛起。从简单的网页脚本语言逐步演进为支持面向对象编程的现代语言,尤其自 PHP 5.3 引入命名空间后,代码组织和维护变得更加高效。PHP 7 的性能优化和 PHP 8 的新特性(如属性和刚性类型)进一步巩固了其地位。框架如 Laravel、Symfony、Yii2 和 CodeIgniter 等简化了开发流程,提高了效率和安全性。
40 2
|
1月前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
5天前
|
存储 移动开发 前端开发
html5有哪些新特性?
【10月更文挑战第19天】
|
29天前
|
安全 编译器 API
探索PHP 8的新特性及其对现代Web开发的影响
【10月更文挑战第5天】随着PHP 8的发布,这门历史悠久的脚本语言重获新生。PHP 8引入了联合类型、命名参数、属性、空安全运算符及JIT编译器等一系列新特性,不仅提升了开发者的编程体验,还增强了PHP在现代Web开发领域的竞争力。本文将详细介绍这些新特性及其对Web开发的影响。例如,联合类型允许函数参数接受多种类型,提高代码灵活性;命名参数则使函数调用更加直观易懂;属性可用于装饰类、方法等,提供额外信息;空安全运算符避免了访问未定义属性时的错误;JIT编译器则显著提升了性能。这些改进共同提升了代码质量和开发效率,巩固了PHP在Web开发中的地位。
21 4
|
1月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
1月前
|
移动开发 JavaScript 前端开发
HTML5 Web Workers详解
HTML5 Web Workers 允许在后台线程中运行 JavaScript,实现复杂计算而不影响用户界面,提升应用性能。其主要特性包括并行处理、异步通信、独立作用域及多数据类型支持。通过创建和使用 Worker 文件,如 `worker.js`,可执行后台任务,并与主线程通过消息传递机制通信。适用于数据处理、图像处理、复杂计算及网络请求并行等场景。需要注意的是,Web Workers 在浏览器兼容性、安全性限制、调试及资源消耗方面需特别关注。合理利用 Web Workers 可显著增强 Web 应用的流畅度和响应速度。
|
1月前
|
SQL 存储 移动开发
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
|
22天前
|
移动开发 前端开发 JavaScript
HTML与现代Web开发的不同技术
【10月更文挑战第11天】HTML与现代Web开发的不同技术
17 0
|
23天前
|
安全 编译器 API
探索PHP 8的新特性及其对现代Web开发的影响
探索PHP 8的新特性及其对现代Web开发的影响
13 0