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