html 5中localstorage小结

创建时间：2013-07-01 投稿人：浏览次数：1945

html 5中的localstorage的小结 demo,如下:

1)

<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Web Storage</title>
</head>
<body>
<h1>HTML5 Web Storage</h1>

<button type="button" onclick="write_local_storage()">Write Local Storage</button>
<button type="button" onclick="read_local_storage()">Read Local Storage</button>
<button type="button" onclick="write_session_storage()">Write Session Storage</button>
<button type="button" onclick="read_session_storage()">Read Session Storage</button>
<button type="button" onclick="clear_data()">Clear</button>

</body>
</html>

2) 然后检查浏览器知否支持html 5的localstorage,比如:


function check_support()
{
	if(typeof(Storage) == "undefined")
  	{
  		alert("Sorry! No web storage support!");
		return false;
	}

	return true;
}

3) 写到localstorage,

function write_local_storage()
{
	if (check_support())
	{
		var persistObject = { "Smith": 23, "Kobi": 18, "Alex": 32 };

		
		localStorage.setItem("persist_data", JSON.stringify(persistObject));
	}

4) 读localstorage

function read_local_storage()
{
	if (check_support())
	{
		

		var storage = window.localStorage; 

		var retrievedObject =  storage.getItem("persist_data");
		var length = storage.length;

		alert("Retrieving " + length + " item(s) from localstroage");
		alert(retrievedObject);
	}
}

5 写session storage

function write_session_storage()
{
	if (check_support())
	{
		var sessionObject = { "keycode": 111, "passpharse": 222, "id": 888 };

		// Put the object into storage
		sessionStorage.setItem("session_data", JSON.stringify(sessionObject));
	}
}

6 读session stage

function read_session_storage()
{
	if (check_support())
	{
		// Retrieve the object from storage

		var storage = window.sessionStorage; 

		var retrievedObject =  storage.getItem("session_data");
		var length = storage.length;

		alert("Retrieving " + length + " item(s) from localstroage");
		alert(retrievedObject);
	}
}

7 清除
function clear_data()
{

if (check_support())
{
localStorage.clear();
sessionStorage.clear();
}
}

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。

热门文章: 收藏HTML5的好的讲座和资源 ...; html 5中localstorage小结

最新文章: 收藏HTML5的好的讲座和资源 ...; 一个好用的检查密码强度的...