HTML5 Web Storage

最新推荐文章于 2021-06-04 19:36:49 发布

Lucifinil

最新推荐文章于 2021-06-04 19:36:49 发布

阅读量174

点赞数

分类专栏： HTML5/CSS3 文章标签： HTML5 JavaScript jQuery ViewUI

本文链接：https://blog.csdn.net/Lucifinil/article/details/84052833

版权

HTML5/CSS3 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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);
    // 呈现数据
};

Lucifinil

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Web Storage

Web Storage简单使用在HTML5中重新提供了一种在客户端本地保存数据的功能，它就是Web Storage功能。Web Storage功能，就是在Web上存储数据的功能。具体来说，又分为两种：sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。se...
复制链接

扫一扫

专栏目录