html5本地存储-sessionStorage,localStorage的使用

最新推荐文章于 2024-05-14 22:15:27 发布

原创最新推荐文章于 2024-05-14 22:15:27 发布 · 623 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#本地存储 #html5 #javascript #sessionStorage #localStorage

HTML5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了HTML5中的本地存储技术，包括sessionStorage和localStorage的特点及使用方法，并通过实例展示了如何保存注册信息和实现购物车同步。

一、本地存储的基本介绍

说到本地存储，我们最熟悉的应该就是cookie存储，数据存储到计算机中，通过浏览器控制添加与删除数据。那cookie有什么特点呢？

①存储限制–域名100个cookie,每组值大小4KB
②客户端、服务器端，都会请求服务器（头信息）
③页面间的cookie是共享的
具体cookie是怎么操作的，我会在javascript栏目的博客中详细叙述的。接下来我们一起接触一下html5中的本地存储-sessionStorage和localStorage.
session为临时会话，从页面打开到页面关闭的时间段，窗口的临时存储，页面关闭，本地存储就会消失。localStorage为永久存储，当然可以手动删除数据。那storage存储相对于cookie它的特点有哪些呢？
①存储量将会达到5M
②客户端完成，不会请求服务器处理
③sessionStorage数据是不会共享的，而localStorage数据是会共享的

二、storageAPI的使用

setItem()	–设置数据，key\value类型，类型都是字符串 –可以用获取属性的形式操作
getItem()	–获取数据，通过key来获取到相应的value
removeItem()	–删除数据，通过key来删除相应的value
clear()	–删除全部存储的值

通过上面的API，我们来做一个<保存注册信息>的小应用，代码如下：

<span style="font-size:18px;"><!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>
<style>
textarea{width:400px;height:400px;border:1px solid black;}
</style>
<script>
window.onload = function(){
	
	var aInput = document.getElementsByTagName('input');
	var oT = document.getElementsByTagName('textarea')[0];
	
	if( localStorage.getItem('text') ){
		aInput[0].value = <span style="color:#FF0000;">localStorage.getIte</span>m('text');
	}
    if( localStorage.getItem('password') ){
		aInput[1].value = localStorage.getItem('password');
	}
	
	if( localStorage.getItem('radio') ){
		aInput[localStorage.getItem('radio')].checked = true;	
	}
	
	if(localStorage.getItem('oT')){
		oT.value = localStorage.getItem('oT');
	}
	//关闭浏览器的时候先将数据存储起来
	window.onunload = function(){
		
		if( aInput[0].value ){
			<span style="color:#FF0000;">localStorage.setItem</span>('text',aInput[0].value);
		}
		if( aInput[1].value ){
			localStorage.setItem('password',aInput[1].value);
		}	
		for(var i =2;i < aInput.length;i++){
			if( aInput[i].checked ){
				localStorage.setItem('radio',i);
			}
		}
		if( oT.value ){
			localStorage.setItem('oT',oT.value);
		}
	};		
};
</script>
</head>

<body>
<p>
	姓名:<input type='text' />
</p>
<p>
	密码:<input type='password' />
</p>
<p>
	<input type='radio' name='sex' value='man'/>男
    <input type='radio' name='sex' value='women'/>女
</p>
<p>
 备注:<br/>
 <textarea> 
 
 </textarea>
</p>
</body>
</html>
</span>

三.存储事件

当数据有修改或删除的情况下，就会触发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');
	
	for(var i = 0;i < aInput.length;i++){
		
		aInput[i].onclick = function(){
			
			if( this.checked ){
				localStorage.setItem(this.value,1);
			}else{
				localStorage.setItem(this.value,0);	
			}	
		};
	}
	
	window.onstorage = function(){
		
		for(var i = 0;i < aInput.length;i++){
			
			if( localStorage.getItem(aInput[i].value) == 1){
				aInput[i].checked = true;
			} else if( localStorage.getItem(aInput[i].value) == 0 ){
				aInput[i].checked = 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>