`

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程序设计（第2版）.[荷]Peter Lubbers(带详细书签).pdf

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

    从入门到精通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高级程序设计.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