本地存储 html5-HTML5本地存储

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

这次项目进行了一些简单的设置，说是后台不需要提供socket，让它在本地完成，使用本地存储，所以现在

了解了本地存储。 。

虽然还是很简单。

目录解释：

1. 饼干

2.cookie的特点

3、储存

4、存储特点

5. 存储API

1. 饼干：

数据存储在计算机中，通过浏览器控制数据的添加和删除。

2、cookies的特点：

存储限制（一个域名100个cookie，每组值4KB）

客户端本地存储 html5，服务器端，会向服务器请求（头信息）

Cookie 在页面之间共享

3、储存：

会话存储

会话临时回调，从页面打开到页面关闭的时间段，

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

本地存储

永久存储（数据可自动删除）

4、存储特点：

存储限制（5M）

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

sessionStorage数据不共享，localStorage共享

5. 存储API

设置项目（）； 设置数据，key/value类型，所有类型均为字符串。 .可以通过获取属性来进行操作

获取项目（）； 获取数据，通过key获取对应的value

除去项目（）; 删除数据，通过key删除对应的value

清除（）; 删除所有存储的值

简单设置和获取示例：

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();  //删除全部数据
		
	};
	
};

不保存注册信息时，浏览器数据不会消失

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);
		}
		
	};
	
};




	用户名:


	性别 : 男
    女

内容 : 

存储风暴：

当数据被更改或者删除时，就会触发存储风暴

不会在更改数据的窗口对象上触发

key：要更改或删除的键值，如果调用clear()，则该键为null

newValue：新设置的值，如果调用removeStorage()，则key为null

oldValue：调用更改之前的值

storageArea：当前存储对象

url：触发脚本更改的文档的url

注意：session只能在同一个窗口内，反例，iframe操作

反例：当前页面不会触发本地存储 html5，但在新打开的页面上会触发

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);
	
};

反例：同步购物车

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);
	
};



香蕉

苹果

西瓜

哈密瓜

你可以测试一下过去的案例，试试看，很实用

还需要浏览器版本，，