web storage sessionStorage与localStorage的使用

本文由清尘发表于2018-01-28 14:32最后修改于2018-04-13属于HTML/CSS分类

在HTML 5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以在客户端本地保存数据的Web Storage功能。我们知道,在HTML 4中可以使用cookie在客户端保存诸如用户名等简单的用户信息,但是,通过长期的使用,人们发现,用cookie储存永久数据存在以下几个问题。
❑大小:cookie的大小被限制在4KB。
❑带宽:cookie是随HTTP事务一起被发送的,因此会浪费一部分发送cookie时使用的带宽。
❑复杂性:要正确地操纵cookie是很困难的。
针对这些问题,在HTML 5中,重新提供了一种在客户端本地保存数据的功能,它就是Web Storage功能。
Web Storage功能,顾名思义,就是在Web上存储数据的功能,这里的存储是针对客户端本地而言的。具体来说,Web Storage又分为两种:
❑sessionStorage
将数据保存在session对象中。所谓session,是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
❑localStorage
将数据保存在客户端本地的硬件设备(通常指硬盘,也可以是其他硬件设备)中,即使浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时仍然可以继续使用。
这两者的区别在于,sessionStorage为临时保存,而localStorage为永久保存。
到目前为止,Firefox 3.6以上、Chrome 6以上、Safari 5以上、Opera 10.50以上、IE 8以上版本的浏览器支持sessionStorage与localStorage的使用。

例一:web storage示例

	<h1>web storage示例</h1>
	<p id="msg"></p>
	<input type="text" id="input" name="">
	<input type="button" value="保存数据" onclick="saveStorage('input');">
	<input type="button" value="读取数据" onclick="loadStorage('msg');">

	//sessionStorage 示例
	function saveStorage(id){
		var target = document.getElementById(id);
		var str = target.value;
		sessionStorage.setItem("message",str);
		//或sessionStorage.message=str;
	}

	function loadStorage(id){
		var target = document.getElementById(id);
		var msg = sessionStorage.getItem("message");
		//或var msg=sessionStorage.message;
		target.innerHTML = msg;
	}
// localStorage示例
function saveStorage(id)
{
    var target = document.getElementById(id);
    var str = target.value;
    localStorage.setItem("message",str);
    // 或localStorage.message=str;
}
function loadStorage(id)
{
    var target = document.getElementById(id);
    var msg = localStorage.getItem("message");
    //或var msg=localStorage.message;
    target.innerHTML = msg;
}

例二:简单Web留言本

效果图如下:

<h1>简单Web留言本</h1>
<textarea id="memo" cols="60" rows="10"></textarea><br>
<input type="button" value="追加" onclick="saveStorage('memo');">
<input type="button" value="初始化" onclick="clearStorage('msg');">
<hr>
<p id="msg"></p>
function saveStorage(id){
	var data = document.getElementById(id).value;
	var time = new Date().getTime();
	localStorage.setItem(time,data);
	alert("数据已经保存");
	loadStorage('msg');
}

function loadStorage(id){
	var result = '<table border="1">';
	for(var i = 0;i<localStorage.length; i++){
		var key = localStorage.key(i);
		var value = localStorage.getItem(key);
		var date = new Date();
		date.setTime(key);
		var datastr = date.toGMTString();
		result += '<tr><td>' +value+ '</td><td>' +datastr+'</td></tr>';
	}
	result += '</table>';
	var target = document.getElementById(id);
	target.innerHTML = result;
}

function clearStorage(){
	localStorage.clear();
	alert("全部数据被删除");
	loadStorage('msg');
}