`

html 5中localstorage小结

javahtml5 
阅读更多
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();
}
}
1
顶
0
踩
分享到：
| spring mvc reset中如何处理点号
评论
发表评论

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

相关推荐

    HTML5 LocalStorage 本地存储刷新值还在

    html5的两种存储技术的最大区别就是生命周期，接下来通过本文给大家分享HTML5 LocalStorage 本地存储刷新值还在问题以及使用方法小结，需要的的朋友参考下本文吧

    完整版《HTML5高级程序设计》5

    由于上传文件大小限制，只能分为5部分上传，其余部分请在我的资源中找到，下载后共同解压 内容简介 　今天，大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能，是每...11.3 小结 221

    完整版《HTML5高级程序设计》2

    由于上传文件大小限制，只能分为5部分上传，其余部分请在我的资源中找到，下载后共同解压 内容简介 　今天，大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能，是每...11.3 小结 221

    HTML5高级程序设计

    本书首先介绍了html5 的历史背景、新的语义标签及与以往html 版本相比的根本变化，同时揭示了html5 背后的设计原理。从第2 章起，分别围绕构建令人神往的富web 应用，逐一讨论了html5 的canvas、...11.3 小结 221

    完整版《HTML5高级程序设计》4

    由于上传文件大小限制，只能分为5部分上传，其余部分请在我的资源中找到，下载后共同解压 内容简介 　今天，大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能，是每...11.3 小结 221

    HTML5程序设计（第2版）.[荷]Peter Lubbers(带详细书签).pdf

    《深入HTML5编程(第 2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化，同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容，并对部分... 13.3 小结 275

    HTML5高级程序设计.part5

    由于上传文件大小限制，只能分为5部分上传，其余部分请在我的资源中找到，下载后共同解压 内容简介 　今天，大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能，是...11.3 小结 221

    完整版《HTML5高级程序设计》3

    由于上传文件大小限制，只能分为5部分上传，其余部分请在我的资源中找到，下载后共同解压 内容简介 　今天，大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能，是每...11.3 小结 221

    HTML5高级程序设计.part4

    由于上传文件大小限制，只能分为5部分上传，其余部分请在我的资源中找到，下载后共同解压 内容简介 　今天，大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能，是...11.3 小结 221

    HTML5高级程序设计.part1

    由于上传文件大小限制，只能分为5部分上传，其余部分请在我的资源中找到，下载后共同解压 内容简介 　今天，大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能，是...11.3 小结 221

    HTML5高级程序设计.part2

    由于上传文件大小限制，只能分为5部分上传，其余部分请在我的资源中找到，下载后共同解压 内容简介 　今天，大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能，是...11.3 小结 221

    HTML5高级程序设计.part3

    由于上传文件大小限制，只能分为5部分上传，其余部分请在我的资源中找到，下载后共同解压 内容简介 　今天，大多数现代浏览器都已经支持HTML5。学习体验HTML5带给Web开发的便捷、快速和强大功能，是...11.3 小结 221

    从入门到精通HTML5——PDF——网盘链接

    　第15章 HTML 5中的文件与拖放 280 　视频讲解：40分钟 　15.1 选择文件 281 　15.1.1 通过file对象选择文件 281 　15.1.2 使用blob接口获取文件的类型与大小 282 　15.1.3 通过类型过滤选择的文件 283 　15.2　...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    2.4 本章小结 15 第三章 跨域交互缓存处理设计 17 3.1 跨域交互缓存处理需求 17 3.1.1 缓存技术WebStorage 17 3.1.2 跨域交互缓存处理需求 17 3.1.3 页面回退管理需求 17 3.2 缓存处理机制 18 3.2.1 跨域缓存处理 18...

    JavaScript权威指南(第6版)中文文字版

    7.9 ecmascript 5中的数组方法 156 7.10 数组类型 160 7.11 类数组对象 161 7.12 作为数组的字符串 163 第8章 函数 165 8.1 函数定义 166 8.2 函数调用 168 8.3 函数的实参和形参 173 8.4 作为值的函数 178 8.5 作为...

    JavaScript权威指南(第6版)(中文版)

    7.9 ECMAScript 5中的数组方法 7.10 数组类型 7.11 类数组对象 7.12 作为数组的字符串 第8章 函数 8.1 函数定义 8.2 函数调用 8.3 函数的实参和形参 8.4 作为值的函数 8.5 作为命名空间的函数 8.6 闭包 8.7 函数属性...

    JavaScript权威指南（第6版）

    7.9 ECMAScript 5中的数组方法 7.10 数组类型 7.11 类数组对象 7.12 作为数组的字符串 第8章 函数 8.1 函数定义 8.2 函数调用 8.3 函数的实参和形参 8.4 作为值的函数 8.5 作为命名空间的函数 8.6 闭包 8.7 函数属性...

Magicbox
Global site tag (gtag.js) - Google Analytics