原文地址: 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>

HTML5 Web Storage 特性的更多相关文章

  1. HTML5 Web Storage

    Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...

  2. HTML5 Web Storage使用实例

    很久没写文章了,忙加懒实在没办法,之前也看过关于Web Storage的文章,当时就觉得各各浏览器的支持跟上来还早着呢,像我们这样做门户网站的一时半会儿也用不上,毕竟用户群体鱼目混杂嘛,最近各各浏览器 ...

  3. HTML5 Web Storage -- 让Cookies看起来如此古老

    转载 原文 在此两部分组成的系列中,我们将来看看HTML5 规范中最棒而且最有趣的特性之一的Web Storage.我们将看看Web Storage 和 Cookies的历史,并从考虑以下几点: *C ...

  4. HTML5 Web Storage概述

    Web Storage html5新增功能 可以在客户端本地保存数据 之前是使用Cookies在客户端保存注入用户名等简单用户信息,但永久数据存在几个问题 大小:cookies大小被限制在4KB 带宽 ...

  5. html5 Web Storage（localStorage()，sessionStorage()）

    Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...

  6. HTML5 WEB Storage - localStorage存储位置在哪

    localStorage作为客户端浏览器持久化存储方案 这个是浏览器隔离的,每个浏览器都会把localStorage存储在自己的UserData中,如chrome一般就是 C:\Users\你的计算机 ...

  7. HTML5本地存储 Web Storage

    Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数 ...

  8. HTML5之WEB Storage

    什么是HTML5 web storage? 使用HTML5,web页面能够使用用户的浏览器本地保存数据. 在曾经,通常我们使用cookie来保存用户数据.然而使用web存储更加安全和高速.数据不再包括 ...

  9. H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

随机推荐

  1. IntelliJ IDEA设置统一编码utf-8

    File菜单->Other Settings->Default Settings->File Encodings 全改成utf-8!

  2. C# 异步转同步

    当我们的程序运行时,调用了一段异步的逻辑A,这段异步的逻辑无法转化为同步(如动画.下载进度等) 而,我们又需要等待异步逻辑A处理完成,然后再执行其它逻辑B. 那就迫切需要将异步转同步了! //参数bo ...

  3. python学习之路网络编程篇（第五篇）-续篇

    Python堡垒机实现之基础知识 一般的堡垒机必须要具备以下5个基本功能: 1.权限控制 2.执行命令 3.上传下载文件 4.远程登录 5.记录操作 权限控制 说明:根据不同的登录用户分配不同的可管理 ...

  4. Docker控制组

    控制组是 Linux 容器机制的另外一个关键组件,负责实现资源的审计和限制. 它提供了很多有用的特性:以及确保各个容器可以公平地分享主机的内存.CPU.磁盘 IO 等资源:当然,更重要的是,控制组确保 ...

  5. 新版Azure CDN HTTPS加速服务正式上线

    随着网络安全问题日益得到全民重视,HTTPS网络访问协议在互联网访问中得到了广泛的使用.Azure CDN也早在一年前的2015年4月上线了HTTPS加速服务.该加速服务上线一年以来,用户使用量逐渐增 ...

  6. Android等宽字体

    Android等宽字体 效果图 在xml中设置 添加属性 android:typeface="monospace" 例如 <TextView android:layout_w ...

  7. Android 结合实际项目学会ListView局部刷新和相关知识《一》

    转载本专栏博客,请注明出处:道龙的博客 最近在公司参与的项目中有一个界面需要做局部UI更新处理,把其化烦为简为Demoi形式写在这里.我们还是运行该Demo,知道ListView局部刷新的使用场景:( ...

  8. RxJava(11-线程调度Scheduler)

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/51821940 本文出自:[openXu的博客] 目录: 使用示例 subscribeOn原理 ...

  9. ROS机器人程序设计（原书第2版）补充资料 （陆） 第六章 点云 PCL

    ROS机器人程序设计(原书第2版)补充资料 (陆) 第六章 点云 PCL 书中,大部分出现hydro的地方,直接替换为indigo或jade或kinetic,即可在对应版本中使用. RGBD深度摄像头 ...

  10. 如何正确使用const、static、extern

    转自:http://www.jianshu.com/p/2fd58ed2cf55 前言 本篇文章主要介绍在开发中怎么使用const.static.extern关键字. 一.const 与宏的区别: c ...