lucifinilhades

浏览: 84740 次
性别:
来自: 苏州

最近访客更多访客>>

jorum

xyqck163

zhugeyixun

kuangweidoc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5 Web Storage

博客分类：

HTML5/CSS3

HTML5 JavaScript jQuery

Web Storage简单使用

在HTML5中重新提供了一种在客户端本地保存数据的功能，它就是Web Storage功能。Web Storage功能，就是在Web上存储数据的功能。具体来说，又分为两种：

sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
localStorage：将数据保存在客户端本地的硬件设备（通常指硬盘，但也可以是其他硬件设备）中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

两者的区别在于，sessionStorage为临时保存，而localStorage为永久保存。使用sessionStorage时，如果关闭了浏览器，数据就会丢失；而使用localStorage时，即使浏览器关闭了，下次打开浏览器时仍然可以读取被保存的数据。但是，数据保存是按不同的浏览器分别进行的，也就是说，如果打开别的浏览器，是读取不到在这个浏览器中保存的数据的。

基本使用方法包括：

sessionStorage.setItem(key, value)、localStorage.setItem(key, value)：在sessionStorage对象、localStorage对象中保存数据。
sessionStorage.getItem(key)、localStorage.getItem(key)：读取保存在sessionStorage对象、localStorage对象中的主键为key的值。
sessionStorage.length、localStorage.length：所有保存在sessionStorage对象、localStorage对象中数据记录的条数。
sessionStorage.key(index)、localStorage.key(index)：将想要得到数据的索引号作为index参数传入，可以得到sessionStorage对象、localStorage对象中与这个索引号对应的主键数据。

使用示例

示例所用页面代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Web Storage</title>
    <script type="text/javascript" src="../js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="../js/webStorage.js"></script>
  </head>
  <body>
    <header> </header>
    <aside> </aside>
    <section>
    	<h1>sessionStorage和localStorage</h1>
    	<form name="sample01" id="sample01">
    		<label for="sTest">使用sessionStorage</label>
    		<input type="text" id="sTest" name="sTest"/>
    		<button type="button" id="saveBtn1">保存数据</button>
    		<button type="button" id="loadBtn1">读取数据</button><br/>
    		<label for="lTest">使用localStorage</label>
    		<input type="text" id="lTest" name="lTest"/>
    		<button type="button" id="saveBtn2">保存数据</button>
    		<button type="button" id="loadBtn2">读取数据</button>
    	</form>
    	<table>
    		<thead>
    			<tr>
    				<th>Key</th>
    				<th>Value</th>
    			</tr>
    		</thead>
    		<tbody></tbody>
    		<tfoot>
    			<tr>
    				<th>Total</th>
    				<th>0</th>
    			</tr>
    		</tfoot>
    	</table>
    </section>
    <footer>
    	<button type="button" id="clearBtn">清除</button>
    	<div id="console"></div>
    </footer>
  </body>
</html>

JavaScript脚本代码如下：

$(function() {
	var progressSave = function(storageObj, data) {
		var current = (new Date()).getTime();
		storageObj.setItem(current, data);
	};

	var insertRecord = function(key, value) {
		$("<tr>").append($("<td>").text(key)).append($("<td>").text(value))
				.prependTo("tbody");
	};

	var progressLoad = function(storageObj) {
		var length = storageObj.length;
		var key = null;
		var date = new Date();
		for ( var i = 0; i < length; i++) {
			key = storageObj.key(i);
			date.setTime(key);
			insertRecord(date.toLocaleString(), storageObj.getItem(key));
		}
		$("tfoot th:last").text($("tbody>tr").size());
	};

	$("#saveBtn1").click(function(event) {
		progressSave(sessionStorage, $("#sTest").val());
	});

	$("#loadBtn1").click(function(event) {
		progressLoad(sessionStorage);
	});

	$("#saveBtn2").click(function(event) {
		progressSave(localStorage, $("#lTest").val());
	});

	$("#loadBtn2").click(function(event) {
		progressLoad(localStorage);
	});

	$("#clearBtn").click(function(event) {
		$("#console,tbody").empty();
		$("tfoot th:last").text($("tbody>tr").size());
	});
});

作为简易数据库使用

保存数据流程

从各输入字段中获取数据；
创建对象，将获取的数据作为对象的属性进行保存；
将对象转换成JSON格式的文本数据；
将文本数据保存在localStorage对象或sessionStorage对象中。

为了将数据保存为一个对象，使用“new Object()”语句创建一个对象，将各种数据保存在该对象的各个属性中，然后，为了将对象转换成JSON格式的文本数据，使用了JSON对象的stringify()方法，使用方法如下：

var str = JSON.stringify(data);

该方法接受一个参数data，该参数表示要转换成JSON格式的文本数据的对象，该方法的作用是将对象转换成JSON格式的文本数据，并将其返回。

读取数据流程

从localStorage对象或sessionStorage对象中，将检索用的关键词作为key获取对应数据；
将获取的数据转换成为JSON对象；
取得JSON对象的各个属性值，创建要输出的内容；
将要输出的内容在页面上呈现出来。

这个过程的关键是使用JSON对象的parse()方法，将从localStorage对象或sessionStorage对象中获取的数据转换成JSON对象，使用方法如下：

var data = JSON.parse(str);

该方法接受一个参数str，此参数表示从localStorage对象或sessionStorage对象中取得的数据，该方法的作用是将传入的数据转换成JSON对象，并且将该对象返回。

使用示例

var save = function() {
    var data = new Object();
    data.name = $("#name").val();
    data.email = $("#email").val();
    data.tel = $("#tel").val();
    var str = JSON.stringify(data);
    localStorage.setItem(data.name, str);
};

var read = function() {
    var key = $("#key").val();
    var str = localStorage.getItem(key);
    var data = JSON.parse(str);
    // 呈现数据
};

分享到：

HTML5 本地数据库 | HTML5 多媒体播放【3】

2011-10-24 15:51
浏览 1560
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 Web Storage

Web Storage简单使用

使用示例

作为简易数据库使用

保存数据流程

读取数据流程

使用示例

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 Web Storage

Web Storage简单使用

使用示例

作为简易数据库使用

保存数据流程

读取数据流程

使用示例

评论

发表评论

相关推荐

使用选择器在页面中插入内容

HTML5 绘制图形【4】

CSS3 选择器【2】

HTML5 绘制图形【3】

CSS3 选择器【1】

HTML5 绘制图形【2】

HTML5 绘制图形【1】

CSS3 模块化结构

HTML5 获取地理位置信息

HTML5 使用Web Worker处理线程

HTML5 Web Sockets通信

HTML5 跨文档消息传输

HTML5 离线应用程序【2】

HTML5 离线应用程序【1】

HTML5 本地数据库

HTML5 多媒体播放【3】

HTML5 多媒体播放【2】

HTML5 多媒体播放【1】

HTML5 拖放API

HTML5 文件API

最近访客更多访客>>