`

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高级程序设计》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——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　...

    完整版《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

    A collection of web gadgets. HTML5移动应用开发结课作业.zip

    4. **Web API使用**：可能利用HTML5的离线存储（localStorage或IndexedDB）、Geolocation、WebSocket等API，实现小部件的本地存储或实时通信功能。 5. **移动优化**：针对不同移动设备的特性进行优化，如触摸事件的...

    工程硕士学位论文 基于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...

    前端结课设计——打地鼠游戏

    【前端结课设计——打地鼠游戏】是一个利用HTML5、CSS3和JavaScript技术实现的互动小游戏，旨在展示前端开发者在课程结束时所掌握的技术能力。这个游戏基于经典的打地鼠玩法，用户需快速点击出现在随机位置的地鼠，...

    js跨域问题小结

    7. Storage共享：HTML5的`localStorage`和`sessionStorage`也支持跨文档共享，只要两个页面的源相同，就可以共享存储的数据。 了解这些跨域解决方案后，开发者可以根据实际需求选择合适的方法。在实际开发中，CORS...

    vue项目小结 - 滚动监听钩子、时间求解、加载、路由、pinia、异步请求、界面展示、数据架构技巧等核心功能总结

    界面展示设计是Vue.js应用开发中的直观部分，包括HTML结构、CSS样式以及组件化。文件内容展示了一个典型的Vue组件结构，包括`&lt;template&gt;`、`&lt;scriptsetup&gt;`和样式。通过组件化，可以提高代码的重用性和可维护性。 ...

    网站前端总结

    - **离线存储**: 通过 `localStorage` 和 `sessionStorage` 改善了数据存储能力。 - **地理位置API**: 提供了获取用户位置的功能。 - **拖拽上传**: 支持直接从桌面拖拽文件到网页。 - **多线程支持**: 虽然...

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