`
xiaomiya
  • 浏览: 131103 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

HTML5本地存储

阅读更多

这次做项目有一些简单设置,说不用后台给接口,让做在本地,用本地存储,,所以现

 

学习了本地存储 了。。

其实还是蛮简单的。

讲解的目录:

1,cookie

2,cookie的特点

3,storage

4,storage的特点

5,storage API

 

 

1,cookie:

            数据存储到计算机中,通过浏览器控制添加与删除数据。

2,cookie的特点:

            存储限制(一域名100个cookie,每组值大小4KB)

            客户端,服务器端,都会请求服务器(头信息)

            页面间的cookie是共享

3,storage:

           sessionStorage

                     session临时回话,从页面打开到页面关闭的时间段,

                     窗口的临时存储,页面关闭,本地存储消失

            localStorage

                      永久存储(可以手动删除数据)

4,storage的特点:

            存储量限制(5M)

            客户端完成,不会请求服务器处理

            sessionStorage数据不共享,localStorage共享

 

 

5,storage API

     setItem();设置数据,key/value类型,类型都是字符串。。可以用获取属性的形式操作

     getItem();  获取数据,通过key来获取到相应的value

     removeItem(); 删除数据,通过key来删除相应的value

     clear();  删除全部存储的值

简单的设置获取例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

window.onload = function(){
	var aInput = document.getElementsByTagName('input');
	
	aInput[0].onclick = function(){
		
		//sessionStorage : 临时性存储
		//localStorage : 永久性存储
		
		//window.sessionStorage.setItem('name',aInput[3].value);
		
		window.localStorage.setItem('name',aInput[3].value);
		
	};
	
	aInput[1].onclick = function(){
		
		//alert(window.sessionStorage.getItem('name'));
		
		alert(window.localStorage.getItem('name'));
		
	};
	
	aInput[2].onclick = function(){
		
		window.localStorage.removeItem('name');
		
		//window.localStorage.clear();  //删除全部数据
		
	};
	
};

</script>
</head>

<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<input type="text" />
</body>
</html>

 

注册信息时没有保存关了浏览器数据不消失

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

window.onload = function(){
	var aInput = document.getElementsByTagName('input');
	var oT = document.getElementById('t1');
	
	if( window.localStorage.getItem('name') ){
		
		aInput[0].value = window.localStorage.getItem('name');
		
	}
	
	if( window.localStorage.getItem('sex') ){
		
		for(var i=1;i<aInput.length;i++){
			if( aInput[i].value == window.localStorage.getItem('sex') ){
				
				aInput[i].checked = true;
				
			}
		}
		
	}
	
	if( window.localStorage.getItem('ta') ){
		oT.value = 	window.localStorage.getItem('ta');
	}
	
	window.onunload = function(){
		
		
		if( aInput[0].value ){
			window.localStorage.setItem('name', aInput[0].value);
		}
		
		for(var i=1;i<aInput.length;i++){
			if( aInput[i].checked == true ){
				window.localStorage.setItem('sex', aInput[i].value);
			}
		}
		
		if( oT.value ){
			window.localStorage.setItem('ta', oT.value);
		}
		
	};
	
};

</script>
</head>

<body>
<p>
	用户名:<input type="text" />
</p>
<p>
	性别 : <input type="radio" value="男" name="sex" />男
    <input type="radio" value="女" name="sex" />女
</p>
内容 : <textarea id="t1">
</textarea>
</body>
</html>

 

存储事件:

     当数据有修改或者删除的情况下,就会触发storage事件

     在对数据进行改变的窗口对象上是不会触发的

     key:修改或删除的key值,如果调用clear(),key为null

     newValue:新设置的值,如果调用removeStorage(),key为null

     oldValue:调用改变前的value值

     storageArea:当前的storage对象

     url:触发该脚本变化的文档的url

注:session同窗口才可以,例子,iframe操作

 

例子:当前页面不会触发,在新开页面触发

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

window.onload = function(){
	var aInput = document.getElementsByTagName('input');
	
	aInput[0].onclick = function(){
		
		window.localStorage.setItem('name',aInput[3].value);
		
	};
	
	aInput[1].onclick = function(){
		
		alert(window.localStorage.getItem('name'));
		
	};
	
	aInput[2].onclick = function(){
		
		window.localStorage.removeItem('name');
		
		
	};
	
	window.addEventListener('storage',function(ev){  //当前页面的事件不会触发
		//alert(123);
		
		console.log( ev.key );
		console.log( ev.newValue );
		console.log( ev.oldValue );
		console.log( ev.storageArea );
		console.log( ev.url );
		
	},false);
	
};

</script>
</head>

<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<input type="text" />
</body>
</html>

 

 

 

  例子:同步购物车

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

window.onload = function(){
	var aInput = document.getElementsByTagName('input');
	
	for(var i=0;i<aInput.length;i++){
		
		aInput[i].onclick = function(){
			
			if(this.checked){
				window.localStorage.setItem('sel',this.value);
			}
			else{
				window.localStorage.setItem('onSel',this.value);
			}
			
		};
		
	}
	
	window.addEventListener('storage',function(ev){  //当前页面的事件不会触发
		
		if( ev.key == 'sel' ){
			
			for(var i=0;i<aInput.length;i++){
				if( ev.newValue == aInput[i].value ){
					aInput[i].checked = true;
				}
			}
			
		}
		else if( ev.key == 'onSel' ){
			
			for(var i=0;i<aInput.length;i++){
				if( ev.newValue == aInput[i].value ){
					aInput[i].checked = false;
				}
			}
			
		}
		
	},false);
	
};

</script>
</head>

<body>
<input type="checkbox" value="香蕉" />香蕉<br />
<input type="checkbox" value="苹果" />苹果<br />
<input type="checkbox" value="西瓜" />西瓜<br />
<input type="checkbox" value="哈密瓜" />哈密瓜<br />
</body>
</html>

 

 

 

可以把例子考过去试试,,很实用哟

 

对浏览器版本又要求哟,,

 

1
0
分享到:
评论
4 楼 luozhong915127 2014-08-27  
文章不错,篇幅有点长,赞一个!
3 楼 995998760 2014-05-03  
oo  
2 楼 xiaomiya 2014-05-03  
995998760 写道
java怎么连接到oracle?


http://www.baidu.com/#wd=java%E6%80%8E%E4%B9%88%E8%BF%9E%E6%8E%A5%E5%88%B0oracle%EF%BC%9F&rsv_spt=1&issp=1&rsv_bp=0&ie=utf-8&tn=baiduhome_pg&rsv_n=2&rsv_sug3=1&rsv_sug4=74&inputT=1207
1 楼 995998760 2014-04-30  
java怎么连接到oracle?

相关推荐

    HTML5 本地存储实现购物车功能

    今天突发奇想,如果能用HTML5本地存储实现,就会大大增高程序效率。当然,HTML5 本地存储涉及到各个浏览器的兼容性,涉及存储数据的大小(NKB)等问题。在这儿需要说明的是:如果你做一个不大不小的微商城项目,那么你...

    html5本地存储-公告模块

    HTML5本地存储是现代网页应用中一个至关重要的技术,它允许开发者在用户的浏览器上存储数据,无需服务器的参与。这极大地改善了用户体验,尤其是对于离线应用或者需要频繁交互的数据缓存场景。在这个"html5本地存储-...

    html5-本地存储

    ### HTML5本地存储详解 #### 一、HTML5本地存储概述 HTML5本地存储(LocalStorage)作为HTML5标准的一部分,提供了强大的客户端数据存储能力。它允许网页应用在用户的浏览器上持久化存储数据,无需每次都从服务器...

    HTML5本地存储——Web SQL Database

    HTML5本地存储是现代Web应用开发中的一个重要特性,它允许应用程序在用户的浏览器上存储大量数据,无需频繁地与服务器交互。Web SQL Database是HTML5本地存储的一种方式,它引入了一个完整的SQLite数据库系统,使得...

    HTML5的本地存储

    ### HTML5的本地存储 #### 一、概述 HTML5 的本地存储技术是现代Web开发中一项非常重要的特性,它允许网页应用在用户的浏览器中存储数据。与传统的Cookie存储方式相比,HTML5本地存储提供了更丰富的功能和更大的...

    shinyStore, R 软件包,将HTML5本地存储支持添加到 Shiny.zip

    shinyStore, R 软件包,将HTML5本地存储支持添加到 Shiny shinyStoreshinyStore 包使得闪亮的应用开发者可以利用HTML5本地存储在用户的浏览器中存储持久的。同步的数据。安装你可以以使用 of R 包安装代码的最新开发...

    HTML5本地存储之Database Storage应用介绍

    HTML5的本地存储机制扩展了Web应用程序的能力,使得开发者可以在用户浏览器中持久化地存储数据。在HTML5之前,Web应用程序依赖于Cookie来存储少量信息,但Cookie由于大小限制和性能原因并不适合大量数据的存储。...

    html5本地存储 localStorage操作使用详解

    HTML5的本地存储功能极大地增强了Web应用程序的能力,使得开发者能够在用户浏览器端持久地存储数据,无需服务器交互。本文主要探讨了HTML5中的两种本地存储形式——`localStorage`和`sessionStorage`,以及它们的...

    html5本地存储web sql数据库操作增删查找实例

    HTML5的本地存储是Web应用程序离线运行的关键技术之一,其中Web SQL数据库是早期实现本地存储的方式之一。本文将深入探讨HTML5中的Web SQL数据库,包括它的创建、表格操作以及数据的增删查改。 首先,Web SQL数据库...

    html5本地数据存储两方案之框架

    - "brianleroux-lawnchair-0.6.3-77-ged3ea57.zip" 和 "zefhemel-persistencejs-v0.2.4-101-gca38084.zip" 是两个流行的JavaScript库,它们抽象了HTML5本地存储接口,使得开发者可以更方便地进行数据操作。...

    HTML5本地存储——IndexedDB

    HTML5的本地存储技术是现代Web应用中一个重要的特性,其中IndexedDB是一个强大的、基于数据库的存储机制。这篇博文将深入探讨IndexedDB的核心概念、用途以及如何在实际项目中运用。 IndexedDB是一种非关系型数据库...

    HTML本地存储实例

    HTML本地存储,特别是HTML5中的localStorage和Web数据库(Database)技术,是现代Web应用中用于在客户端存储数据的重要工具。这些技术使得开发者可以将部分数据存储在用户的浏览器中,从而提高应用程序的性能,减少...

    HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 ...

    探索HTML5本地存储功能运用技巧

    HTML5的本地存储功能是现代Web开发中的一个重要特性,它允许网页在用户的浏览器上存储数据,无需服务器交互。这在创建离线应用、提高页面加载速度、存储用户偏好设置等方面非常有用。本篇文章将深入探讨HTML5本地...

Global site tag (gtag.js) - Google Analytics